이 포스트는 엘리스 AI 트랙 4기 강의를 듣고 정리한 내용입니다.
HTML과 CSS는 웹 페이지의 화면을 구성하는 가장 기본적인 구성 요소이다. HTML은 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 마크업 언어이다.
이 포스트에서는 HTML의 태그와 CSS의 속성에 대해 알아본다.
HTML tag
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
HTML의 파일 형식은 fileName.html이다. HTML 문서는 여러가지 태그로 구성되어 있다. <html>로 시작되며 <head>, <body>가 차례대로 온다. 위 코드는 Visual Studio Code에서 기본적으로 제공되는 구조이다.
<main>
<main>태그는 <body>요소의 주요 content를 정의할 때 사용된다. 문서에서 반복되는 내용을 포함해서는 안되며 role="main"속성은 반드시 명시해 줘야 한다.
Block 요소
HTML문서에서 Block요소는 줄 바꿈 현상이 일어나는 태그들이다. 공간을 수정할 수 있으며, 상하 배치 작업이 가능하다. <h#>, <header>, <div>태그들이 있다.
Inline 요소
HTML 문서에서 Inline요소는 x축 정렬 형태로 한 줄로 출력된다. 공간을 수정할 수 없으며, 상하 배치 작업이 불가능하다.
CSS
1
2
3
selector {
attribute: "value";
}
CSS는 웹 페이지의 디자인에 관련된 부분을 담당하고 있다. CSS는 선택자, 속성, 속성값으로 구성된다.
CSS 선택자
CSS의 선택자는 HTML의 어떤 요소에 CSS를 입힐 것인지 정한다. 선택자는 type, class, id로 3가지가 존재한다. Type은 HTML의 태그에 해당하며, class는 각 HTML 태그의 클래스, id는 각 태그의 id로 하나의 태그에만 사용할 수 있다.
CSS의 적용 우선 순위
CSS를 HTML 태그에 적용할 때 우선순위가 존재한다. 같은 속성일 경우 가장 마지막에 적용한 속성값이 우선순위가 높고, 선택자가 구체적으로 작성된 경우 우선순위가 높다. 예를 들어, header p {}가 p {}보다 우선순위가 높다. 선택자에도 순서가 있는데, style> id> class> type순으로 우선순위가 높다.
몇 가지 속성 정리
- display: block과 inline 요소의 성격을 바꿀 때 사용한다.
- float: 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬 시키고자 할 때 사용한다.
- clear: float에 대한 속성을 제어하고자 할 때 사용된다.
- text-align: x축으로 정렬한다
- line-height: y축 정렬이 가능하다
- margin: border 바깥쪽에 여백을 만든다
- padding: border 안쪽에서 여백을 만든다. 공간이 여백을 포함한 크기로 변경되기 때문에 사용 시 유의해야 한다.
- border: 박스의 테두리를 꾸민다.
- height: 100vh :
vh는 스크린 기준 100%를 말한다. - justify-content: x축 가운데 정렬을 해준다.
- align-items: y축으로 가운데 정렬해 준다.
CSS 선택자
1
2
.notice > p {
}
notice라는 클래스의 자식인 p 태그에 적용된다. .notice p {}는 notice 클래스 아래에 있는 모든 p 태그에 적용된다.
1
2
3
.red {
color: blue !important;
}
!important는 다른 조건이 있어도 우선 순위가 되게 한다.
애니메이션
CSS에서는 반응형을 나타낼 수 있는데, property는 효과를 적용하고자 하는 CSS 속성을 지정하고, duration은 효과 지속 시간, delay는 효과가 발동 되기까지의 시간의 조건을 지정한다.
미디어 쿼리와 viewport
모바일에 대응되는 반응형 웹 사이트를 만들기 위해 사용한다. 미디어 쿼리의 min-width, max-width로 브라우저의 가로폭을 설정한다. viewport는 디지털 기기의 화면 상에 표시되는 영역을 의미한다.
미디어 쿼리는 pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹 사이트를 만들기 위한 것이다. 모바일에 대응되는 반응형 또는 적응형 웹 사이트를 만들 때 사용하는 CSS 구문이다.
미디어 쿼리 사용 시에는 head 태그 안쪽에 viewport를 반드시 작성해야 한다. viewport는 <meta>태그에 작성된다.
1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
viewport는 위와 같다. width=device-width는 기기의 가로폭, initial-scale=1.0은 비율은 항상 1.0을 유지한다는 뜻이다.
CSS 속성 상속
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.media {
width: 500px;
height: 500px;
background-color: green;
}
@media (min-width: 300px) and (max-width: 600px) {
.meida {
width: 300px;
height: 300px;
background-color: red;
border: solid 10px green;
}
}
미디어 쿼리 외부 영역에 있는 CSS 속성을 상속 받는다. 위 코드는 기기 가로폭 300px 이상 600px이하가 될 경우 media 클래스의 디자인을 변경하게 된다.
1주차의 내용인 HTML과 CSS 강의가 끝이 났다. 생활 코딩 강의로만 보던 이고잉님께 직접 강의를 들어 더 재밌게 강의를 들었던 것 같다. 뭔가 유명인을 본 듯한 느낌이라 신기하기도 했다. 다음 주 부터는 javascript를 배우게 된다. javascript도 잘 정리해 봐야겠다.