중요한 이유: 시각적으로 끌기 위해서, 더 잘 보여주기 위해서
Apple 이 css 가장 좋다니까 들어가 보시고
1. Html, css 가 다른 언어이기에 개발자가 한번 합쳐주는 게 필요함
방법 총 3개
1) Inline Style : 태그 안에 속성 부여 -> 어떤 스타일 먹일 건지 결정
—> <p style=“color:red;” —> 스타일이 먹여짐
; 으로 이어붙여서 속성 여러개 연결 가능
<p style=“color:red; backgroundcolor:black; font-weight:bold”>
문제점: 코드가 길어져서 개발자들이 알아보기 어려움 한눈에. 가독성 떨어짐
2) 해결법: Style 태그
<head> 태그 안에, <style> 태그 만들어놓고, <body>의 style 속성 복사해서 옮기기, 바디 선택자에 style 속성은 지우고
<head>
<style>
p { color:red; backgroundcolor:black; font-weight:bold
1-1. Style 태그 왜 쓰게 됐는지 이유를 이해해야.
단순히 길어서 쓰게 된게 아니라,
[장점 2가지]
1) html 과 css 완벽히 구분
- 밑에는 구조를 짜는거니, 스타일까지 먹이지 말자/ 역할 분리 위해 (개발자들은 역할 분리 좋아함)
- 밑에는 html 태그니가 그거로만 구조 짜는 데에만 집중하자./ 예쁘게 꾸미는건 css style 태그로 따로 빼서 관리하자 / (Style 태그 안에 들어 있는 문법은 css 문법)
2) 똑같은 역할을 하는 코드를 똑같이 -> 중복 -> 위로 빼자
Section 태그마다 style 속성 주면 계속 하나씩 추가, 수정 싫다.
개발자들이 마음에 안 든다
3) CSS 파일만 따로 빼서 관리한다 (대부분 개발자, 팀, 회사가 이 방법)
CSS, html 파일을 온전히 분리한다.
각기 다른 파일에 저장됨, 독립적 파일 서로 아무 관계 없음.
그래서 무조건 연결 지어줘야 (css 에서 html 연결하는게 아니라, html에 css link 연결. 순서!)
- 코드 길어진다면 ,html css 분리돼도 한눈 파악 힘듦
home.css —> html head에 있던 style 태그 안에 있는 내용만 잘라내기, (style 태그만 따로 모으기)
home.html—> style 태그 삭제 없애주기
파일끼리 분리해도, 파일끼리 연결은 해줘야!
Head 안에 해야! Link 걸어주기!
<link href=“home.css” rel=“stylesheet”/>
- “home.css” 링크 이름
- Rel: 파일 종류 (style 먹여야 해서)
- <link> - 웹 페이지가 어떤 파일과 연결되어 있는지 웹 브라우저에게 알립니다.
- href - 연결하고자 하는 파일을 지정합니다.
- rel - 관계(relationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계를 설명합니다.
** css파일도 광범위해져서 파일을 두 개로 나눠서 했으면 Html 파일에 두개를 이어주면되나요
—> css 여러개 하셔도 됩니다.
일반적으로는 html파일이랑 css 파일이랑 한세트로 맞춰서 이용합니다
보통 1개당 1개에 맞춰요
2. CSS 문법
누구한테, 어떤 스타일을, 어떻게 입히겠다
- 누구한테 입힐지를 정해야 selector 선택자
- 어떤 스타일을 property
- 어떻게 value 값
- 2,3번은 declaration
p{font-size:10;}
마지막에 ; 꼭 붙여주기
선택자는 { } 앞에
- 같은 종류의 모든 태그가 아닌, 일부 요소만 스타일을 수정하기 위해서는 어떻게 할까요?
- 원하는 요소의 스타일만 수정하고 싶은 경우에는 다른 선택자를 활용할 수 있습니다.
1) id 선택자
Html
<h1 id="html">HTML</h1>
<h1 id="css">CSS</h1>
<h1 id="js">JavaScript</h1>
CSS
#html {color: red;}
#css { color: yellow;}
#js { color: blue;}
- id 앞에 #을 붙입니다.
- id는 프로그래밍에서 ‘고유함’의 상징입니다.
- 하나의 id 는 하나의 태그에만 부여할 수 있습니다.
- id 선택자는 유일한 요소에 스타일을 정의할 때 사용합니다.
2) class 선택자
HTML
<h1 id="html">HTML</h1>
<p clas="content">HTML에 대해 배워보도록 하겠습니다.</p>
<h1 id="css">CSS</h1>
<p clas="content">CSS에 대해 배워보도록 하겠습니다.</p>
<h1 id="js">JavaScript</h1>
<p clas="content">JavaScript에 대해 배워보도록 하겠습니다.</p>
CSS
#html { color: red;}
#css { color: yellow;}
#js { color: blue;} → id
.content {font-size: 14px;} → class
- class 앞에 점(.)을 붙입니다.
- class는 우리말로 학급, 그룹을 의미합니다.
- 하나의 class는 여러 요소에 동시에 부여할 수 있습니다.
- class 선택자는 여러 요소에 동일한 디자인을 적용할 때 사용합니다.
- 또한 하나의 요소에 두 개 이상의 class 를 부여할 수 있습니다.
HTML
<h1 id="html">HTML</h1>
<p clas="content inactive">HTML에 대해 배워보도록 하겠습니다.</p>
<h1 id="css">CSS</h1>
<p clas="content active">CSS에 대해 배워보도록 하겠습니다.</p>
<h1 id="js">JavaScript</h1>
<p class="content inactive">JavaScript에 대해 배워보도록 하겠습니다.</p>
CSS
#html { color: red;}
#css { color: yellow;}
#js { color: blue;}
.content {font-size: 14px;} → class= “content active”
.active {color: red;}
.inactive {color: grey;} → clas="content inactive"
Border (다시 듣기)
아래 방법, 레이아웃, Margin 해보기
1. 제목 가운데 정렬. —— 위치
2. 이미지 가운데 정렬. —- 정렬
3. P 태그 문단 간격(들여쓰기) —- 여백
4. 홈, 내용 위아래 <-> 좌우 정렬 —- 레이아웃
5. 테두리 선
CSS 할때 가장 먼저하는게 border 처리 —> 내가 어디를 건드리는지 정확하게 알고 있어야 함
4. 가운데 정렬
검색, ‘css 글씨 가운데 정렬'
Text align 속성, 값 center
h1{text-align:center;}
5. 이미지 가운데 정렬
img{text-align:center;}
—> 안 됨 —> text 를 위한 속성이기에
검색, ‘css 이미지 가운데 정렬’
—> block level 컨테이너 안에서 해야 함
글씨가 가운데 갔던 이유는, 이미 블록 레벨이기에 (한줄 전체 다 차지하는) 전체 칸에서 가운데에 온 것.
이미지는 끝에 칸을 작게 이미지 사이즈만큼 자리 잡고 있기에, 가운데라는 기준이 없음. 나 이미 가운데에 있는데?
방법1) 이미지 태그를 강제로 블록레벨로 만든다 (바꾼다)
검색, ‘css 인라인 레벨을 블럭라벨로 변경’
img{display:block;}
방법2) 이미지 태그를 감싸는 블록레벨을 생성한다. (만든다)
이미지 위아래에 블록레벨을 씌어주기
이미지 들어갈 수 있는 자리 마련, img 태그 위아래에 <div> </div> 감싸주기
이미지 자체에 가운데 정렬하는게 아니라,
div에게, 너 뭗 들어가 있어? 안에 들어있는 모든 거 다 가운데 정렬시켜
6. P 태그에 간격 주는 방법 (들여쓰기)
Padding
Margin
padding
p{padding:50px;}
전체 테두리에 간격 넣어주는 —> 둥 뜨게 만드는
따로 줄수도 있음
p{padding-left:50px;} —> 왼쪽만 띄어주기
p{padding-right :50px;}
p{padding-top:50px;}
p{padding-bottom:50px;} —> 아래쪽만 띄어주기
띄어졌는지 오렌지색으로 확인 가능한
p{border:3px solid orange padding:50px;}
2)요소간의 간격차이기때문에 크게 간격 차이 안 남
내 요소 안에서 간격 벌리는가 (안쪽에): padding
Margin: 밖에 간격 주는
p{margin:50px;}
p{margin-left:50px;}
7. 레이아웃 잡기 (비율은 다음시간)
간격이 위아래로 나뉘어 있는건, <section> 태그는 이미 블럭레벨이라 좌우 나누는게 불가능하다.
한칸을 다 차지하게 되어 있음 디폴트로.
-> 이거 때문에 span 태그로 바꿀 순 없음.
좌우로 나누는 방법
4-1. 두가지 섹션을 포함하는, 감싸고 있는 부모태그 만들어주기 parent tag
4-2 parent tag 내부 요소를 양쪽 정렬
지금은 섹션 태그 하나로도 꽉참, 종속이 없음. 부모님이 같아야 함 —> 그래서 부모 태그 만들어줌
2개의 <Section> 태그에 부모태그 만들어주기 -> div 태그 구분해주는 (division), tab 눌러서 section 태그는 들여쓰기
div태그 너무 의미 없이 쓰여서 이름 부여 —> <div class=“section-wrapper”>
그런데..
이미 이전에 img 때문에 div 써서 가운데 정렬, 그래서 class 부여
<div class=“image-wrapper”>
전체 div 말고 image wrapper에게만 가운데 정렬해
—> css 파일에 가서 class 이니까 .찍고
.image-wrapper{text-align:center;}
———————————
.section-wrapper{display:flex}
블럭레벨에 잇는 자식들을(한칸 다 차지하던) 나눠 쓰게
Cf. Section-wrapper 말고 다른거 content-wrapper 해도 됨
그런데 우좌 가 돼버림 —> flex 먹이면 우선순위가 위에 있는게 좌, 오른쪽에 있는게 우로 가서
두개의 <section>태그 위치 바꾸는게 쉬움 (올리고, 내리고)
Cf. 단축키: 잠깐 지우고 싶은 줄 (주석처리) ctrl+/
웹사이트
구조 먼저 잡아놓는게 먼저 (폰트 사이즈, 색 입히고)
Font-weight: bodl
Font- size: 30px
폰트 사이즈를 px 말고 %로 해도 상관 없는걸까요?
—> 회사, 프로젝트마다 선호하는게 다름
px는 절대 크기 , 언제나 50px
Rem -> 부모에 따라 내가 작아지고 커짐
em -> 전체 돔트리에서
Rem 과 em 차이는 부모 차이
8. 폰트 종류
font-family는 폰트 종류를 지정하는 속성
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}
- 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
- Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
- 이것도 지원되지 않으면 Times을 적용
- 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.
- 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.
8-1. font size 크기
8-2. font weight 두께
- normal, bold, 100, 200, ... 900 등의 값을 지정할 수 있습니다.
- 숫자 400과 normal은 같은 두께입니다.
- 숫자 700과 bold는 같은 두께입니다.
8-3. font style
font-style 을 이용하여 글씨 스타일을 바꿀 수 있습니다. italic이라는 값을 지정하면 이탤릭체로 변하게 됩니다.
8-4. color
.pink {
color: pink;
}
- pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정할 수 있습니다.
- blue, red, deepskyblue 등 다양한 텍스트 색상이 있습니다.
색상을 표현하는 방법에는 여러가지가 있습니다.
- hex 색상코드: 여섯자리로 표현 - #eb4639
- rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
- hsl: 색상, 채도, 명도*(hue*, saturation, *lightness)*로 표현 - hsl(4, 82%, 57%)
아래 세가지는 모두 같은 색입니다.
물론 개발자가 모든 값을 기억하고 있을 수 없습니다.
구글에서 "color picker"라고 치거나, "color picker hex color"등의 키워드로 검색하면,
내가 원하는 색상을 뽑아주는 여러 extension들이 있습니다.
만약 hex 표현에서 rgb 표현으로 바꾸고 싶다면 google에 "color hex to rgb"라는 키워드로 검색해서 찾아보시면 됩니다.
9. Text style
9-1. text-align
property 이름은 text-align이고 값은 left, center, right.
left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
- 모든 요소의 기본 정렬은 왼쪽 정렬입니다./ 그래서 아무 text-align을 주지 않은 "로그인하세요"와, left라는 class 이름을 지정한 11번째 라인의 정렬이 같습니다.
- <span>에 오른쪽 정렬이 되도록 클래스를 부여했지만, 오른쪽 정렬이 되지 않았습니다. <span>은 inline-element이므로, "span의 오른쪽 정렬"이라는 text만큼 영역을 차지하고 있어 정렬이 되지 않습니다.
9-2. 들여쓰기 indent
방법 1. text-indent 을 이용하여 css로 들여쓰기
css
.jsDescription { text-indent: 50px;}
Html
<blockquote class="jsDescription"> 안녕하세요
- html 코드 내에서 스페이스와 엔터를 아무리 추가하여도, 실제 결과 화면에서는 적용이 되지 않습니다.
참고1
- blockquote 태그: 인용구문을 넣을 때 /브라우저에서 blockquote 태그에 양쪽 여백을 넣는 기본 스타일 적용하였습니다.
방법 2.
Html 에
<p> 안녕하세요 </p>
- 그럼 문장 사이 사이에 스페이스를 추가하고 싶을 때는 어떻게 하나요?
JavaScript는 스페이스를 10개 추가하여도 하나의 스페이스밖에 적용되지 않습니다.
이럴 때는 스페이스를 의미하는 을 추가하면 됩니다.
<p> 스페이스 넣는 예제 </p>
= 스페이즈 넣는 예제
10. 상속(Inheritance)
상속은 css가 가진 특성입니다.
말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미
1)
p 태그는 아무 스타일도 갖고 있지 않는데
부모인 body 태그에 영향을 받아서 빨간색과 14px로 변경되었습니다.
2)
부모에게 color: red;라는 속성이 있더라도
본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용됩니다.
javascript 클래스의 부모(blockquote)는 color: black;를,
하나 더 위의 부모(body)는 color: red;속성을 가졌지만,
본인도 color 속성을 갖고 있으므로 파란색
11. 그룹(Grouping)
여러 selector에 동일한 스타일을 적용할 수 있습니다.
.whatIsBlockquote, span { color: green;}
12. Selector 선택자
selector는 class나 id를 태그와 결합하여 작성할 수
p.pTag {color: gray;}
p#thirdLine { text-decoration: underline;}
첫 번째는 p 태그이면서 pTag 클래스
두 번째는 p 태그이면서 thirdLine 아이디
p #third-line .p-tag
p 태그, 아이디, 클래스 ⇒ 이런 조합도 가능하긴 하지만,
앱 통틀어 third-line라는 아이디는 오직 한 개이므로 위와 같이 tag+id+class의 조합은 과한 표현입니다.
여러 selector를 함께 사용할 수도 있습니다.
아래 css에서 최종적으로 적용되는 selector는 span입니다.
selector가 서로 붙어있지 않고 스페이스로 띄워있다는 것을 주목해주세요!
.pre span { background-color: yellow;}
→ 그런데 모든 span이 아니라
"pre" class 내부에 있는 span이라는 뜻입니다.
<div class="main">
<span>이건 아님!</span>
</div>b (x)
<div>
<p class="pre">
<span>이건 적용됩니다! 노란색배경!</span>
</p>
</div> (o)
.a div .b .pre span {background-color: yellow;}
→ a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그 적용이 됩니다.
<div class="a">
<div>
<header class="b">
<h1 class="pre">
<span>제목! 노란색 배경 나옴!</span>
<span class="title">이것도 나옴!</span>
div .container li.firstList
→ <li>태그인데 "firstList" class인 요소에 css를 적용한다.
그런데 <div>태그 내부의, "container"class 내부에 있는 요소에만 적용한다.
12-1. CSS Specificity 우선순위
p {font-size: 30px;}
.pTag {font-size: 15px;}
font-size가 중복 적용되었네요.
브라우저에서는 30px과 15px 중에서 어떤 값을 적용할까요?
selector 표현마다 우선순위가 있습니다.
이 우선순위는 점수 계산으로 이루어집니다.
- inline styling(13줄에 style 요소로 직접): 1000점
- id: 100점
- class: 10점
- tag: 1점
- p태그에 적용된 30px은 1점
- pTag clss에 적용된 15px는 10점이므로 15px이 적용
p.pTag { font-size: 100px;}
1점(p) + 10점(.p-tag) = 11점 이기 때문에 해당 요소는 100px이 적용
css를 작성할 때 이렇게 점수를 계산해가면서 해야될 필요는 없습니다.
거의 대부분의 요소에 class를 부여해주고,
class를 selector로 styling해주기 때문에,
최대한 중복을 피할 수 있도록 작성합니다.
그리고 점수의 gap이 워낙 크기 때문에 아래의 개념정도만 알면 됩니다.
tag <<<<< class <<<< id <<<<<< inline css
13. 이미지 크기 조절
Webview에 보이는 첫 번째 이미지의 크기를 조절해 보겠습니다.
img 태그의 속성(attribute)에는 width, height가 있어서 html에서 직접 수정 가능합니다.
하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 style.css에서 작성하는 것이 좋습니다.
img { width: 150px;}
위의 코드를 style.css에 추가
가로의 150px 비율에 맞춰서 세로도 알맞게 줄어들었습니다.
이렇게 가로/세로 중에서 하나의 값만 입력하여도 브라우저에서 알아서 같은 비율로 나머지 크기도 줄여줍니다.
background-image로 이미지 넣기
css로 이미지를 넣어보겠습니다.
일단 이미지를 넣을 영역이 필요해서 div 태그를 하나 추가해주었습니다.
<div class="bgImg">배경이미지</div>
결과화면을 보시면 "배경이미지"라고 텍스트가 있고 노랗고 까만 뭔가가 뒤에 깔려있습니다.
bgImg 클래스에 배경이미지를 넣는 css를 추가한 것입니다.
.bgImg { background-color: yellow;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
background-color 는 배경색을 추가하는 것이고,
background-image 는 배경 이미지를 추가하는 것입니다.
- 배경색 background-color 를 추가하지 않으면 하얀색 바탕화면이 나와서, 영역을 한 눈에 보기 어려워서 노란색으로 칠했습니다.
div.bImg에 노란 배경색을 칠했습니다. 노란색 영역, 즉 div.bgImg의 가로 크기는 화면 전체이고, 세로 크기는 "배경 이미지" 텍스트 높이 만큼이네요. 이것처럼 div 태그는 자식태그, 즉 div 태그 내부에 있는 내용이나 요소의 크기에 의해 세로가 결정됩니다.\
div의 가로크기는 화면의 가로 크기만큼입니다.
이렇게 가로 전체를 차지하는 것을 block 요소라고 하며 p, header, h1 등등이 block 요소입니다. (나중에 block 요소와 inline 요소에 대해 자세히 배울 것입니다.)
div 태그는 자식 태그나 div 태그 내부에 있는 내용의 세로 크기가 곧 div 태그의 세로가 됩니다.
div 태그의 가로 크기는 div 태그의 내부에 뭔가가 있기만 하면 화면 전체의 너비가 곧 자기의 가로 크기가 됩니다.
그래서 div.bgImg의 노란색 배경이
가로는 화면 전체 너비만큼 칠해졌고, 세로는 딱 글씨 크기만큼 칠해진 것입니다. div.bgImg의 내용인 "배경이미지"를 지우고 run을 클릭해 재실행 해볼까요?
네, 결과 화면에서 아예 사라졌습니다.내부에 아무것도 없어서 가로와 세로크기가 모두 0이 되었습니다. div.bgImg의 크기는 0px*0px이 되었습니다. 다시 "배경이미지" 텍스트를 넣고 재실행 해주세요 :)
.
.bgImg { height: 300px;}
아무래도 가로도 너무 커서 작게 줄여야겠습니다. 아래 값을 추가해주세요.
.bgImg { width: 300px;}
그런데.bgImg 크기는 줄었는데 원본 이미지는 줄지 않았습니다.
네! 이미지를 담는 영역인 .bgImg의 크기만 줄인것이고,
배경이미지의 실제 크기는 원본크기 그대로 이면서, 그 중에서 .bgImg 의 크기(300px*300px)만큼만 보여지는 것입니다.
이럴 때는 아래와 같이 background-size 속성을 사용하여 배경이미지 크기를 조정해주어야 합니다.
.bgImg { background-size: 100%;
}
오! 드디어 이미지가 보이네요.
div.bgImg의 내용(텍스트)이 없는데도 화면에 사라지지 않았습니다.
이전에는 내용(텍스트)이 없어서 자동으로 가로, 세로가 0px 이었기 때문입니다.
현재는 css에서 가로, 세로를 고정했기 때문에 그 크기만큼 영역을 차지하고 있어 화면에 보이는 것입니다.
사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img> 태그를 사용하는 것과
<div> 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
✅ 위의 질문에 대답할 수 있나요? 실제 면접에서 자주 다루는 질문입니다. 이를 설명하기 위해서는 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.
✅ Semantic Web과 Semantic Tag에 대한 학습은 각자 구글링을 통해 학습하시고, 해당 주제로 블로그에 글을 작성해 보세요. 위의 면접 질문에 대한 답변과 연결시켜 작성해보시면 좋겠습니다.
14. Margin, Padding
- border 스타일을 주면 테두리가 그려집니다.
- padding은 border 내에 생기는 영역
- margin은 border 외부에 생기는 여백입니다.
p.example {
width: 273px;
height: 90px;
margin: 50px;
border: 5px solid black;
padding: 50px;
}
p.example {
padding: 50px 50px 50px 50px;
}
한 번 더 풀어쓰면 아래와 같습니다.
p.example {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
15. Border
margin의 위쪽-오른쪽-아래쪽-왼쪽 순서도 외워야하고,
border 순서도 외워야하고..
여기서 margin의 순서는 고정값이므로 순서를 꼭 지켜야 합니다.
border 순서는 중요하지 않습니다.
그래도 전 세계적으로 약속된 coding convention(코딩 규칙)에 따라 순서를 맞춰주는 것이 좋습니다.
15-1. 순서
두께, 선스타일, 선 색상
선 스타일
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
이 중에 거의 solid만 사용하지만,
혹시 다른 선스타일도 사용할 경우가 있으니 다양한 스타일이 있다는 것만 알아두시면 좋겠습니다.
선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다.
blockquote {
border-top: 4px double red;
border-right: 2px solid #666666;
border-bottom: 6px dashed darkviolet;
border-left: 1px dotted #00ee44;}
결과 화면을 보니 정말 못 생겼네요.
이런식으로 다양하게 border 디자인을 하지 않습니다.
대신에 테두리를 분리하여 스타일할 경우는 많이 있습니다.
p { text-decoration: underline;}
위의 p태그에 밑줄을 쳐주는 스타일입니다.
p { border: 5px solid red;}
span { border: 1px dotted #0000ff;}
그런데 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵습니다.
이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있습니다.
css 문법으로 볼 때는 밑줄이 아니라 아래쪽 테두리이지만
내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.
span { border-bottom: 3px solid black;padding-bottom:5px;}
- text-decoration: underline;은 마음대로 커스터마이징하기 어렵기 때문에 웹 사이트에서 대부분의 밑줄 스타일은 이렇게 구현합니다.
16. Box
글씨만 적혀있어서 각 요소의 너비를 확인하기가 어렵네요.
style.css의 14줄에 white를 yellow로 바꾸고 재실행해봅시다.
body div { background-color: yellow}
.first {
width: 300px;
margin-bottom: 20px;
}
.second {
width: 300px;
margin-bottom: 20px;
padding: 50px;
border-width: 10px;
}
첫 번째는 가로가 300px이 맞는데,
두 번째 박스는 확인해보면 가로가 300px가 아닙니다.
이유는 양쪽으로 테두리 10px이 추가되었고, padding이 50px 씩 추가 되어서 가로가 420px이 되었습니다.
10+10+50+50+300 = 420
이런 특성을 파악하고 코딩하면 딱히 문제가 없겠지만,
귀찮은 일이 생깁니다.
디자인 시안에서는 박스의 가로값만을 알 수 있는데,
디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됩니다.
눈으로 보이는 그 너비가 개발자가 코딩하는 그 값이여야 코딩과 머리속으로 생각하는 로직이 같아지지 않을까요?
수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었습니다.
.new {
box-sizing: border-box;
}
이와 같이 보이는대로 width 값을 주고, 그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽습니다.
그래서 거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용합니다.
또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.
그래서 이럴 때는 아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.
* {
box-sizing: border-box;
}
앞으로 강의에서 box-sizing 프로퍼티를 딱히 넣지는 않고 진행하겠습니다.
하지만 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티 입니다.
'Wecode- 프리코스 (부트캠프)' 카테고리의 다른 글
| 프리코스 (6) - Javascript : 2.데이터 타입, 3.String 문자열 (0) | 2023.09.26 |
|---|---|
| 프리코스 (5) 8/18 - JS pre 강의 : 1. Console (0) | 2023.09.26 |
| 프리코스(4) - 8/17 CSS Position,컴퓨팅사고, JS (0) | 2023.09.26 |
| 프리코스(1) - 8/14 HTML (0) | 2023.09.26 |
| 프리코스 (0)- OT (0) | 2023.09.26 |