3.0~3.5
3. LEARNING CSS
3.0 How to Add CSS to HTML
CSS HTML에 적용 시키기
방법1
html 파일의 <head></head>섹션에 <style></style>태그를 사용하여 그 사이에 CSS 코딩
(추천!)방법2
css 파일을 따로 만들고 html에 <link rel="stylesheet" href="css파일명.css" />로 연결 _ <head></head>섹션에 작성.
3.1 Writing Our First CSS Lines
css코드 작성규칙
- selector로 스타일을 줄 태그 선택
- 중괄호 안에
속성: 값을 입력- 속성이름은 띄어쓰기 , 밑줄, 슬래쉬 사용불가
- 속성은 필요할때마다 찾아서 쓰기
- 끝에 세미콜론으로 마무리
selector { 속성: 값; }
3.2 What Does Cascading Mean
Cascading의 의미와 브라우저가 CSS 를 읽는 법
Cascading
폭포같은 , 계속되는, 연속되는
브라우저가 CSS 를 읽는 순서
- 위에서 아래로 읽는다
- selector에 중복된 속성을 지정하면 마지막에 명령한 스타일이 적용된다.
3.3 Blocks and Inlines
block과 inline
▶️웹페이지를 이루는 모든 요소들이 box형식이며 대부분 block 형식이다.
block
- 옆에 다른태그가 올 수 없다.
- div / p / header 등등 ...
inline
- 옆에 다른 요소가 올 수 있다.
- img / a / span 등등..
3.4 Margin Part One
Margin_1
각 요소의
display 를 사용하여 inline / block 의 속성을 바꿀 수 있다.
display: inline: block 요소를 inline 으로 바꿔줄 수 있다.display: block: inline 요소를 block로 바꿔줄 수 있다.
inline은 block 과 달리 높이와 너비가 없다.
- box 가 아니기 때문에 margin / padding / border값을 줄 수 없다.
브라우저는 요소들에게 자동으로 기본 스타일을 적용한다.
- block 요소에 자동으로 margin이 생김(inspect 로 확인)
- css로
margin:0을 넣으면 자동으로 만들어진 공간 사라짐
- css로
margin?
margin box의 border 바깥의 공간
3.5 Margin Part Two
Margin_2
▶️ margin-top / left / right / bottom모두 따로 지정할 수 있음
▶️ margin:
1 value = top / left / right / bottom 모두 같은 값
2 value = 첫번째 값 은 top / bottom , 두번째 값은 right/left
4 value = top / right / bottom / left 순서대로 적용
collapsing margin
▶️ 두 box의 상하 경계가 겹칠때 margin이 하나로 취급되어 둘중 더 큰 margin 값이 적용된다.
👉padding 속성으로 해결가능
(Quiz) 🥳
매일 매일 기록하기