01. 기본 문법과 선택자의 역할
- 선택자 {
속성 : 값;
속성 : 값;
}
div {
font-size : 20px;
color : red;
}
선택자의 역할
- 선택자는 HTML에 스타일을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인이다.
02. 속성과 값
-속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용한다.
CSS 의 속성 = Properties HTML의 속성 = attribute (영어 단어는 살짝 다르다.)
03. 선언 방식
1) 태그에 직접 작성하는 인라인 선언 방식
<div style="color : red; "> Hello </div>
단점 : 하나의 태그에 일일이 다 넣어줘야 되는 단점이 있다.
2) HTML에 포함하는 내장 선언 방식
CSS만 따로 작성하기 때문에 선택자가 필요하다.
3) HTML 외부에서 불러오기 <link>태그 활용
04. 선언 방식 예제
05. 선택자
1) 태그로 찾기
선택자를 입력하는 부분에 적용하려는 태그의 이름을 입력합니다.
2) 클래스로 찾기 ( 태그로는 너무 광범위 하여 일정 태그에 클래스를 선언 )
class = 'title' -> .title { } ( 선택자에 점을 붙여 사용 )
( 하나의 요소에 2개의 클래스도 선언 가능 ex) class="box box1" box하고 box1클래스를 가지게된다. )
06. 속성 1 - 크기
-width ( 가로 너비 ) 요소의 가로 너비를 지정하고 단위는 px(pixel)을 사용한다.
-height ( 세로 너비 ) 요소의 세로 너비를 지정한다.
-font-size ( 글자 크기 )
07 속성 2 - 여백
-margin ( 요소의 바깥 여백 ) 바깥 여백은 요소와 요소 사이의 여백(거리, 공간) 을 생성할 때 사용한다.
-padding ( 요소의 내무 여백 ) 내부 여백은 자식 요소를 감싸는 여백을 의미한다.
padding을 사용하면 요소의 안에 여백이 생기기 때문에 요소가 가지고 있는 기본적인 사이즈 보다 커지게된다.
08 속성 3 - 색상
- color(글자 색상) font-color, test-color로 실수를 한다 . <- 이런 속성은 없다.
div{
color : red;
글자색상 : 빨강 ;
}
- background ( 배경 색상 )
홈화면 상단 만들기
이 화면을 만들기 위해 html로 틀을 만들어준다.
큰 틀을 가지는 header 클래스 그리고 메뉴를 가운데로 몰아주는 container 클래스 그 안에 왼쪽 컨테이너 클래스를 설정한다. 로고는 이미지 소스를 통해 연결하고 alt (이미지가 없을 때 대체할 이름 ) 도 설정을 해주고 그리고 메뉴들을 설정해 주면 이제 틀을 다 만들어 졌다.
css
'프론트엔드 > HTML' 카테고리의 다른 글
| 06. HTML / 요소 - 인라인 텍스트 & 수정 (0) | 2021.02.02 |
|---|---|
| 05. HTML / 요소 - 콘텐츠 구분 & 문자 콘텐츠 (0) | 2021.02.01 |
| 04. HTML / 개요, 요소 - 주요범위 & 메타데이터 (0) | 2021.01.23 |
| 02. HTML & CSS 첫걸음 / HTML (0) | 2021.01.16 |
| 01. HTML & CSS 첫걸음 / 개요 (후기) (0) | 2021.01.13 |
댓글