Carrot

html 7

WIL (3/27 ~ 4/2)

올해도 벌써 4월입니다! 코드잇 부캠에 참여하면서 언제 이렇게 🌸벚꽃🌸이 만개했나 모를 정도로 시간이 꽤나 지났네용 이번주는 얼른 공부를 끝내고 주말엔 가족과 나들이를 목표로 달릴게요🔥🔥🔥 3/27 javascript 기본 문법 자료형 확인 - typeof 정수, 소수 구분 없이 숫자는 Number 자료형 동등 연산자(==)와 일치 연산자(===) NaN 연산 과정에서 자동 형 변환 탬플릿 문자열 ${ } null과 undefined CSS position 속성 z-index flexbox 레이아웃 3/28 CSS grid 유닉스 command command 단축키 상대경로, 절대경로 사용자의 home 경로 - ~ 여러가지 command - pwd, cd, ls, mkdir, touch, cat, les..

사담 2023.04.03

[HTML, CSS] 클래스를 한 요소에 여러 개 적용하기

html 내의 이나 css 파일에서 정의한 스타일들을 한 태그 내에 여러 개 적용하는 방법에 대해 알아보자. .style1 { ... } .style2 { ... } .style3 { ... } 위처럼 여러 스타일들이 있을 때, 한 태그(요소)에 여러 스타일을 일괄 적용하고 싶은 경우, class="style1 style2 style3..." 의 형식으로 작성해준다. Hello, HTML! ✅ 참고로, 여러 스타일에 같은 속성이 중첩될 경우, 가장 마지막에 선언된 속성이 적용된다.

Front-end/HTML, CSS 2021.01.25

[CSS] margin과 padding 이해하기

margin과 padding margin은 각 요소들 사이의 여백을, padding은 하나의 요소에서 컨텐츠와 border 사이의 여백을 의미한다. 1. margin margin-top margin-right margin-bottom margin-left 예시 (1) h1 { margin-left: 15px; } Q. 이 때 나머지 속성값은 어떤가? A. 해당 태그에 기본적으로 설정돼있는 margin을 유지한다. ✅ 참고로 태그는 기본적으로 margin-top과 magin-bottom이 21.440px이다. 예시 (2) h1 { margin-top: 15px; } Q. 이 때 나머지 속성값은 어떤가? A. 태그의 margin-top이 15px로 설정되고, 앞서 말했듯이 기본값인 margin-bottom:..

Front-end/HTML, CSS 2021.01.18

[CSS] border 속성에 대해

목차 1. border 만들기 - border 2. border 둥글게 만들기 - border-radius 1. border 만들기 border 속성을 통해 border를 만들 수 있다. (1) solid (실선) h1 { border: 5px solid red; } border 두께를 5px border 선 유형을 solid(실선) border 색상을 red (2) dotted (점선) h1 { border: 5px dotted red; } border 두께를 5px border 선 유형을 dotted(점선) border 색상을 red (3) dashed (파선) h1 { border: 5px dashed red; } border 두께를 5px border 선 유형을 dashed(파선) border 색..

Front-end/HTML, CSS 2021.01.18

[HTML] 한글 깨짐 현상 해결 방법

👿 잘 코딩하고 있다가 갑자기 한글 인식이 안돼서 외계어로 나타나는 경우가 종종 있다. 그럴 때마다 항상 구글링하며 찾아야 해서 귀찮았는데, 이참에 한글 깨짐 현상에 대해 해결할 수 있는 방법들에 대해 정리하고자 한다. 1. 으로 설정 한글 인식이 가능한 utf-8(유니코드) 인코딩을 할 것임을 미리 html로 웹 브라우저 측에게 알려준다. 2. 웹 브라우저 자체 내에서 인코딩 설정 각 웹 브라우저별로 인코딩 설정에 들어가는 방법은 다음 글을 참고한다. 깨진 텍스트의 인코딩 설정 - Google Merchant Center 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com 인코딩 설정 방법은 각 웹 브라우저마다 다르겠지만 어쨌든 인코딩 설정으로 들어가..

Front-end/HTML, CSS 2021.01.14

[HTML] HTML의 태그들

목차 1. 태그 2. ~ 태그 3. 태그 4. 태그 5. 태그 이번에 HTML의 기본적인 태그들을 정리해본다. 1. 태그 태그는 웹 사이트 탭의 제목을 설정해주는 역할을 한다. ... ✅ 참고로 위의 은 웹 브라우저에게 이 html 파일을 어떤 html 버전으로 적용할지 알려주는 역할을 한다. 이 때는 html의 가장 최신 버전인 html5를 적용한다는 뜻이다. 위 HTML을 실행하면 다음과 같다. 2. ~ 태그 (heading) ~ 태그는 문단에서 머리말(제목)을 입력할 때 쓰인다. , , , , , 태그들로 구성되며, 1에서 6으로 갈수록 제목의 폰트 사이즈는 작아진다. Hello, World! Hello, World! Hello, World! Hello, World! Hello, World! Hel..

Front-end/HTML, CSS 2021.01.14

[HTML, CSS, JS] 언어별 주석 달기

프로그래밍에 있어서 좋은 DX를 위해 적절한 주석을 다는 것은 중요하다. 주요 웹 언어인 HTML, CSS, JS별로 주석을 다는 방법을 공유한다. 1. HTML 2. CSS (1) // 주석 내용 (2) /* 주석 내용 */ // 한 줄 주석처리 시 /* 한 줄로 작성하거나 이처럼 여러 줄을 한 번에 주석처리할 수 있다. */ ✅ html 내부의 태그로 css를 추가하는 경우에도 css 주석 형식인 /* */을 쓰도록 한다. 3. JavaScript (1) // 주석 내용 (2) /* 주석 내용 */ //한 줄 주석처리 시 /* 한 줄로 작성하거나 이처럼 여러 줄을 한 번에 주석처리할 수 있다. */

Front-end 2021.01.12