1. CSS 선언 방법
inline > internal > external
inline
- body 태그 안에 넣기
- 우선순위가 가장 높음
<body>
<span style="color:red">Hello World</span>
</body>internal
- head 태그 안에 넣기
- 별도의 CSS 파일을 관리하지 않아도 됨
<head>
<meta charset="utf-8"/>
<title>My page</title>
<style>
span {
color : red;
}
</style>
</head>
<body>
<span>Hello World</span>
</body>external
- 외부파일(.css)로 지정하기
span {
color : red;
}<head>
<meta charset="utf-8"/>
<title>My page</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<span>Hello World</span>
</body>
2. 상속과 우선순위 결정
- id > class > tag 순서로 우선순위를 가짐
- width, height, margin, padding, border
- 위와 같이 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않음
cascading
- CSS는 여러가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해 적절한 스타일이 반영됨
선언 방식에 따른 차이
- 같은 selector라면 나중에 선언한 것이 반영됨
- 구체적인 selector가 반영됨 (body > span 과 span 중 전자)
3. CSS selector
- HTML의 요소를 tag, id, class, html 태그 속성 등을 통해 쉽게 찾아주는 방법
tag로 지정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>This is title</title>
<style>
span {
color : red;
}
</styl>
</head>
<body>
<span>Hello World</span>
</body>
</html>id로 지정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>This is title</title>
<style>
#spantag {
color : red;
}
</styl>
</head>
<body>
<span id="spantag">Hello World</span>
</body>
</html>class로 지정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>This is title</title>
<style>
.spantag {
color : red;
}
</styl>
</head>
<body>
<span class="spantag">Hello World</span>
</body>
</html>CSS selector의 다양한 활용
하위 요소 선택 (공백)
div span { color : red }
자식 선택 (>)
div > span { color: red }
n번째 자식 요소 선택
1. div > p:nth-child(2) { color : red }
div 태그의 자식 태그들 중에서 n번째 자식 태그가 p이면 색상을 red로 변경 -> first
2. div > p:nth-of-type(2) { color : red }
div 태그의 자식 태그들 중에서 n번째 p태그의 색상을 red로 변경 -> second
<div>
<h2>This is h2</h2>
<p>first</p>
<p>second</p>
<p>third</p>
<p>fourth</p>
</div>
4. CSS 기본 Style 변경하기
font 사이즈 변경
- em (상대적 단위)
- 부모 selector에 의해 1em의 크기가 정해짐
5. CSS layout
- Element를 화면에 배치하는 것
중요하게 이해해야 할 속성들
- display (block, inline, inline-block)
- position (static, absolute, relative, fixed)
- float (left, right)
블록으로 쌓이는 엘리먼트 (display:block)
- display 속성이 block이거나 inline-block인 경우, 벽돌을 쌓듯이 쌓임
- 만약 display : inline 속성을 준다면, 오른쪽으로 흐르는 방향으로 쌓임
옆으로 흐르는 엘리먼트 (display:inline)
- 왼쪽 -> 오른쪽, 위 -> 아래로 흐름
- 높이와 넓이 속성을 줘도 반영되지 않음
좀 다르게 배치시키기 (position 속성)
- position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월함
- position 속성은 기본 static. 그냥 순서대로 배치됨
- absolute는 기준점에 따라 특별하게 위치함. 상위 엘리먼트 중 static이 아닌 position이 기준점
- relative는 원래 자신이 위치해야 할 곳을 기준으로 이동함
- fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작함
간격을 다르게 해서 배치하기 (margin:10px)
- margin은 상하좌우 엘리먼트와 본인간의 간격. 따라서 그 간격만큼 내 위치가 달라짐
기본 배치에서 벗어나서 떠있기 (float:left)
- 원래 flow에서 벗어나 둥둥 떠다님
- 뒤에 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩돼서 배치됨
- float 사용해서 빨강 div와 초록 div를 나란히 배치함
하나의 블록 엘리먼트는 box 형태임 (box-model)
- margin: 엘리먼트 간 간격
- border: 테두리
- padding: 엘리먼트 내 콘텐츠와의 간격
엘리먼트의 크기는 부모의 크기가 기본
- 자식은 기본적으로 부모의 크기만큼을 가짐
box-sizing과 padding
- padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있음
- box-sizing 속성으로 이를 컨트롤 할 수 있음. 엘리먼트의 크기를 고정하면서 padding 값만 늘림
- box-sizing:border-box 속성을 줌
요약 : 그래서, layout 구현 방법은?
- 전체 레이아웃은 float을 잘 사용해서 2단, 3단 컬럼 배치를 구현
- 최근에는 css-grid나 flex 속성 등을 사용하기도 함
- 특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정함
- 네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 함
- 엘리먼트 안의 텍스트 간격, 다른 엘리먼트 간의 간격은 padding과 magin 속성을 잘 활용해서 위치시킴
https://www.boostcourse.org/web316
웹 프로그래밍(풀스택)
부스트코스 무료 강의
www.boostcourse.org
'강의 노트 > 웹 프로그래밍(풀스택)' 카테고리의 다른 글
| [boostcourse] 2.4. Redirect & Forward - BE (0) | 2023.06.20 |
|---|---|
| [boostcourse] 2.3. JSP - BE (0) | 2023.06.20 |
| [boostcourse] 2.2. WEB UI 개발 - FE (0) | 2023.06.19 |
| [boostcourse] 1.5. Servlet - BE (0) | 2023.06.16 |
| [boostcourse] 1.1. Web개발의 이해 - FE/BE (0) | 2023.06.15 |