![[CSS] Day01 (Note+Code): 단위, 선택자, 박스 모델](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWLBnm%2FbtruPblNVVa%2Fn0h4dO1TPZ2ErPKjKrMjSK%2Fimg.png)
2022/3/2
HTML이 웹사이트 내용을 나열하는 것이라면 CSS는 디자인 구성. (html5, css3)
Javascript는 웹 상에서 프로그래밍 언어라고 할 수 있다. 이벤트 처리 등 여러 로직과 기능을 구현해서 동적인 페이지로 보이게 해 준다.
CSS
: Cascading Style Sheets. 독립적으로 사용 불가. HTML에 디자인적 도움을 주는 언어.
1. CSS selector (선택자)
: HTML 문서의 특정 부분에 대해 렌더링 방법을 (또는 디자인적인 부분을) 정의하기 위해서는 특정 부분을 선택하기 위해 선택자를 사용해야 한다.
2. CSS 적용 형식
: 선택자로 요소를 선택하고 그에 관련한 속성명 써주고 옆에 속성 값.
선택자 {속성 명 : 속성 값;}
속성 명 = property 속성 값 = 값
선택자: selector, 스타일을 어디에 적용할 것인지 지정하는 것.
{} 스타일 적용 코드 영역
/* css 주석*/
3. css 적용 방법 3가지
① 외부 스타일 시트: css 파일 별도로 작업하여 연결 (확장자명. css)
<link href = “css 파일의 전체 경로” rel = “stylesheet” type = “text/css”/>
유지 보수하기 좋고 작업하기 편하다.
② 내부 스타일 시트: html 파일에 <style> 태그로 작업. 수업은 내부 스타일 시트로 작업.
③ 인라인 스타일 시트: html 태그에 style 속성으로 작업
<link href="css01.css" rel="stylesheet" type="text/css"/>
<!--외부스타일시트-->
<style> /*내부 스타일 시트. CSS 문법으로 작성*/
h2{color:aquamarine}
</style>
</head>
<body>
<h1>외부 스타일 시트</h1>
<h2>내부 스타일 시트</h2>
<h3 style = "color: blueviolet;">인라인 스타일 시트</h3>
</body>
</html>
Reset CSS
W3C에서 공식적으로 권장하는 방식은 아니나, 실무에서 크로스 브라우징 이슈 때문에 사용되는 경우가 있다. 기본 태그에 지정된 스타일 초기화시키기.
cdn: 라이브러리를 직접 다운로드하여 적용하는 것이 아니라, 온라인 상으로 배포된 다른 서버상의 라이브러리 파일의 링크(주소)를 적어, 라이브러리를 배치하는 방식
<!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>
<!--스타일 초기화-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
<!--밑에다 내가 작성한 css파일 걸어주기-->
<link rel="stylesheet" href="css01.css"/>
</head>
<body>
<h2>hello</h2>
<h3>test</h3>
<a>링크</a>
</body>
</html>
CSS 단위
*크기 단위
1. px: 화소 단위, 해상도에 따라서 상대적으로 변할 수 있다.
2. %: 백분율 단위의 상대 단위/ 지정 사이즈를 기반으로 상대적 사이즈 비율을 가짐.
3. em: 배수 단위. 지정한 사이즈를 기반으로 배수로 계산된 사이즈를 가져온다. 기본 폰트를 16px로 했다면 1em 16px, 2em 32px. 중첩 태그일 경우 바로 상위 태그의 값을 기준으로 하기 때문에 값의 일관성이 떨어질 수도 있다.
4. rem: root em으로, 최상위 요소 사이즈를 기준으로 한다.
<style>
html{ font-size: 16px;}
span.em{ /*스판태그. 클래스 속성 값이 em인 것들을 찾아 값을 2으로 해주겠다.*/
font-size: 2em;
}
span.rem{
font-size: 2rem;
}
</style>
</head>
<body>
<span class="em"> <!--클래스 속성을 부여 -->
<span class="em">중첩1
<span class="em">중첩2</span>
</span>
</span>
<br/>
<span class="rem"> <!--클래스 속성을 부여 -->
<span class="rem">중첩1
<span class="rem">중첩2</span>
</span>
</span>
</body>
</html>*반응형 viewport 단위
반응형: 사용자의 디바이스 디스플레이 사이즈에 따라 하나의 사이트가 자동으로 크기 변경되도록 하는 기능
viewport: 웹 브라우저에서 웹페이지가 표시되는 영역
1. vw: viewport width(너비). 1vw = 1% 100vw = 100%
2. vh: viewport height(높이)
3. vmin: viewport 너비 또는 높이 중 작은 쪽 1/100(1%)
4. vmax: viewport 너비 또는 높이 중 큰 쪽 1/100(1%)
*색상 표현 단위
1. 색상 이름: https://www.w3shools.com/cssref/cee_colors.asp
2. 16진수: #ffffff와 같이 표현. 연속되는 문자가 있으면 #fff 이런 식으로 줄일 수 있음.
3. RGB: red, green, blue. rgb(138,42,225)
4. RGBA: 위에 알파 값 (투명도) 추가. rgba(137,34,65,0.5) 알파 값은 0~10 사이.
selector 선택자
1. 전체 선택자: * 써주면 전체 선택 자임.
2. 태그 선택자: 태그명을 쓰면 된다.
3. id 선택자: #id속성 값
4. class 선택자: . class속성 값
<style>
*{color: yellowgreen;}
h1{color: honeydew;}
#hello{color:violet;}
.ciao{color: mediumaquamarine;}
</style>
</head>
<body>
<h1 id="hello">hello css!</h1>
<h2 class="ciao">hello css!!</h2>
<h3>hello css!!!</h3>
</body>
</html>
5. 속성 선택자:
[속성 명]: 속성을 가지는 모든 태그
[속성 명 = 값]: 속성에 저 값을 갖는 태그들
[속성 명^=값]: 값으로 시작하는 (위와 달리 대소문자 구분함)
[속성 명 $= 값]: 값으로 끝나는
[속성 명 *= 값]: 값을 포함하는 모든
<style>
[class]{color: darkgreen;}
[class *=l]{color: khaki;}
</style>
</head>
<body>
<h1 class="hello">hello css!</h1>
<h2 class="hell">hello css!!</h2>
<h3>hello css!!!</h3>
</body>
</html>
6. 복합 선택자
후손 선택: 스페이스 간격으로 표시 p a span ex) h1 span
자식 선택: >로 표시 (바로 아래 자식) ex) ul > li
인접 형제 선택자: + 로 표시. 밀접한 형제만 가능 ex) li.test + li
일반 형제 선택자: ~ 로 표시 먼 형제도 가능
<style>
h1 {color: olive;}
div span {color: orangered;}
div > p {color: magenta;}
h1 + h2 {color: aquamarine;}
h1 ~ h2{color: goldenrod;}
</style>
</head>
<body>
<div>
<h1>hello css!</h1>
<h2><p>hello css!!</p></h2>
<p> Lorem ipsum dolor<span>sit amet consectetur</span> adipisicing elit. </p>
<h2><p>hello css!!</p></h2>
</div>
<span>Consequatur eum voluptatibus sit temporibus velit?</span>
</body>
7. 가상 클래스 선택자
어떤 요소에 이벤트가 발생할 때 선택되는 문법
선택자 뒤에 : (콜론)을 사용해서 표시
:link 방문하지 않은 링크가 적용된 요소
:visited 방문한 링크가 적용된 요소
:hover 마우스가 올라간 상태
:active 클릭하고 있는 상태
:focus 포커스가 있는 상태
<style>
ul{list-style: none;}
a {text-decoration: none; font-size: 30px;}
a:link { color: black;} /*a태그인데 링크가 걸린애들*/
a:visited{color: rosybrown;}
a:hover {background-color: burlywood;}
a.active {color: plum;}
a.focus {background-color: lime;}
</style>
</head>
<body>
<ul>
<li><a>web sites</a></li>
<li><a href="http://naver.com">naver</a></li>
<li><a href="http://google.com">google</a></li>
<li><a href="http://daum.net">daum</a></li>
</ul>
</body>
8. UI 요소 상태 선택자
특정 요소의 UI 상태에 따른 선택자
:enabled 사용 가능한 상태
:disabled 사용 불가능한 상태. disable = “true”
:checked 체크가 된 상태
:indeterminate 상태가 결정되지 않은 상태(체크 버튼이나 라디오 버튼이 체크가 안됐을 때)
<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>
<style>
input[type="radio"]:indeterminate + span{color: blue;}
input[type="radio"]:checked + span{color: orange;}
input[type = ":checkbox"] :enabled+span {color: saddlebrown;}
input[type = ":checkbox"] :disabled+span {color: darkcyan;}
</style>
</head>
<body>
<h1>hello css</h1>
<form>
<input type="radio" name="item"/><span> item1 </span> <br/>
<input type="radio" name="item"/><span> item2 </span> <br/>
<input type="checkbox" name="check"/><span> check1 </span> <br/>
<input type="checkbox" name="check" disabled/><span> check2 </span> <br/>
</form>
</body>
9. 구조 가상 클래스 선택자
자식 선택자:구조가상 선택자
:first-child 첫 번째 자식
:last-child 마지막 자식
:nth-child(n) n번째 자식 요소 (n은 1부터 시작)
:nth-last-child(n) 뒤에서부터 n번째
<style>
p:first-child{color: magenta;}
p:last-child{color: darkcyan;}
p:nth-child(2n) {color: darkorange;} /*숫자를 2n으로 해주면 2의 배수로 됨*/
</style>
</head>
<body>
<h1>hello css3</h1>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
</body>
10. 부정 선택자
:not(선택자) //앞에 선택한 것에 not 빼고..~!
<style>
p:not(.test) {color: red;}*/
</style>
</head>
<body>
<div>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
11. 가상 요소 선택자
요소의 내용 중 특정 부분을 선택, :: 콜론 두 개 사용
::first-letter
::first-line
::after
::before
::selection –드래그한 부분 (브라우저, 디바이스에 따라 호환이 안될 수 있다)
<style>
h2::before{content: "Before"; color: sandybrown;}
h2::after{content: "After"; color: greenyellow;}
p::first-letter{font-size: 3rem;}
p::first-line{color: lightcoral;}
p::selection{color: lightcoral; background-color: lightgreen;}
</style>
</head>
<body>
<h2>hello css</h2>
<h2>css selectors</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti, ipsam voluptatibus labore perferendis reiciendis
repellat consectetur ratione repudiandae praesentium ipsa vel
iure cumque cum hic, possimus magnam magni ex minima!</p>
</body>
CSS Box Model
html 요소들을 박스 형태로 정의하는 방법
박스 모델은 마진, 패딩, 테두리 등 박스가 여러 겹 들어있다.
1. 박스 모델 종류
블록 레벨 요소: 혼자 한 줄 차지하는 요소. p, h, ul, ol, div, form, table
인라인 레벨 요소: 혼자 한 줄 차지하지 않는 요소. img, br, span, input, textarea, button 등
2. 박스 모델 기본 구성
margin: 요소와 요소 사이 여백 (다른 요소 사이 여백)
border: 요소의 테두리 굵기
padding: 테두리와 실제 콘텐츠(내용물) 사이 여백 공간 (두께)
content: 실제 내용물. (width, height 속성 가짐)
3. 주요 프로퍼티 (속성)
① width / height. 너비, 높이를 나타내는 속성으로 사이즈의 기준을 정하는 box-sizing 속성에 따라 너비, 높이의 기준이 달라짐.
box-sizing 속성의 디폴트 값은 content-box가 지정되어 있음 -> w/h는 content의 너비와 높이가 됨
box-sizing을 border-box로 지정하면 마진을 뺀 나머지, 즉 content+padding+border 영역의 너비/높이가 됨
② margin/ padding
상하좌우 여백 세부적으로 적용 가능
값을 4개를 쓴다면 상우하좌 (시계 방향) 모두 지정 가능
3개: 상 좌우 하
2개: 상하 좌우
1개: 상하좌우
*auto: margin에 auto를 지정하면 양쪽 마진이 적절히 분배되어 중앙 정렬 효과를 낼 수 있다. 이때 width가 명시적으로 지정되어야 양쪽 여백이 생겨 효과를 낼 수 있다.
div{
max-width: 800px;
height: 200px;
background-color: beige;
border: 5px solid brown;
box-sizing: border-box;
overflow: hidden;
}
</style>
</head>
<body>
<!--
<div>CSS Box Model</div>
-->
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ut, dolores itaque aspernatur nemo adipisci quia. Quisquam facilis
similique maiores consectetur expedita. Nam perferendis esse
recusandae soluta et quidem est laudantium!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nesciunt, consectetur quas! Accusantium ipsam at, nulla quos,
doloremque error hic a dolorum eveniet eius, atque corporis eum
nesciunt aperiam in. Quo?
</div>
div{
width: 400px;
background-color: lavender;
border-style: solid;
border-width: thick;
border-color: tomato;
border-radius: 10px;
border: 4px groove rosybrown;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas, illo. Quaerat voluptate atque repudiandae quia iste
quis, autem maxime, sunt aspernatur voluptatem praesentium eos
fuga. Eum nobis pariatur animi esse!
</div>
③ box-sizing
content-box: default: width, height의 기준을 content 사이즈로
border-box: width, heigh의 기준을 content+padding+border 합친 사이즈로
<style>
div.box1{
width: 300px;
height: 150px;
background-color: yellowgreen;
border: 10px solid rosybrown;
box-sizing: content-box;
}
div.box2{
width: 300px;
height: 150px;
background-color: tan;
border: 10px solid darkcyan;
box-sizing: border-box; /*이건 보더까지 더해서 300에 150*/
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>