📘 오늘 배운 것
1. 적용방법
✔ 총 2가지 (style 태그 / 태그 안에 style 적용)
✔ head 태그에 적용
✔ 중괄호 안에다 기입해야함
1) style 태그
- { 속성: 속성값; } 형태
- ; 작성 습관 꼭 들이기
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>2) 태그안에 style 적용
<h1 style="background-color: pink;">Hello World</h1>1),2) 에는 치명적 단점 존재 !
코드가 많아질 경우 html, css가 함께 존재한다면 가독성이 떨어지고 유지 보수에 어려움 -> html, css 따로 관리해서 link태그로 연동해주어 도면 설계하기 (변동사항 생기면 html, css쪽 모두 저장)
<head>
<meta charset="utf-8">
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>2. 부모 자식 관계
✔ 유전자 개념
✔ 부모가 자식에게 유전자를 물려주고, 자식은 그 유전자의 영향을 가장 많이 미치게 된다.
header {
color: red;
}
h1 {
color: blue;
}
p {
color: green;
}1) 주의점 : 부모가 가지고 있는 유전자를 모든 자식이 상속 받는 것은 아님
ex) a 태그
2) 쉼표(,)를 사용하여 코드 분량 및 효율적인 디자인 작업 가능
header h1,
footer h1 {
color: red;
}3. CSS에서 HTML 특정영역에 접근하는 방법
1) type 선택자 : html 태그를 기준으로 접근하고자 할 때
<h1>Hello World</h1>
h1 {
color: red;
}2) ID 선택자 : 태그의 고유에 이름을 붙음
<h2 id="test1">Nice to mee you</h2>
#test1 {
color: blue;
}3) Class 선택자 : 태그에 별명을 붙임
<h3 class="test2">Welcome</h3>
.test2 {
color: green;
}4) Attribute(속성) 선택자 : input 태그 사용, 어떤 타입의 속성값을 가지고 선택하는 것
<input type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">
input[type="text"] {
border: solid 10px red;
}
input[type="password"] {
border: solid 10px blue;
}
📍 경우에 따라 어떤 선택자를 사용하면 될까 ?
1) 우선, ID vs Class 차이점을 우선 살펴보아야 한다.
- Class는 여러개의 별명(속성값)을 가질 수 있으나, ID의 경우 하나의 속성값만 사용 가능
<h2 id="color-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>
.bg-1 {
background-color: red;
}
.font-size-1 {
font-size: 50px;
}
#color-1 {
color: red;
}- 문서 1개당 ID의 속성값 1개만 존재
즉, color-1은 문서에서 한개만 있어야 한다 !
<h2 id="color-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>
<p class="bg-1">hi</p>
<h4 id="color-1">hello</h4>2) ID, Class 속성값으로 부모-자식 관계로도 디자인 작업 진행
<header id="intro">
<div class="container">
<h2>header h2</h2>
<p>header p</p>
</div>
</header>
<p>Out p</p>
#intro h2 {
color: red;
}
header P {
color: blue;
}
header div p {
color: blue;
}
header .container p {
color: blue;
}
#intro .container p {
color: blue;
}4. CSS 코드의 우선 순위, Cascading
✔ 어떤 디자인을 우선적으로 처리 할 것 인가 ?
✔ 우선 순위에 영향을 미치는 개념
✔ style 속성 > id > class > tag -->
1) 동일한 선택자를 적용할 경우, 나중에 작성한 코드가 우선 순위로 적용됨
<h1>hellol<h1>
h1 {
color: red;
}
h1 {
color: pink;
}2) Class의 우선 순위가 더 높다는 것을 알 수 있음
<h1 class="color-1">hellol<h1>
.color-1 {
color: green;
}
h1 {
color: red;
}
h1 {
color: pink;
}3) Class와 ID중에서는 ID
<h1 class="color-1" id="color-2">hello<h1>
#color-2 {
color: pink;
}
.color-1 {
color: green;
}4) ID와 Style중에서는 Style
<h1 style="color: gray;" class="color-1" id="color-2">hello<h1>
#color-2 {
color: pink;
}
.color-1 {
color: green;
}
h1 {
color: red;
}
h1 {
color: pink;
}📍 Cascading 응용
⭐) 원본 코드 유지, 새로운 CSS 추가하여 디자인을 덮어 쓰이고 싶을 때 활용 !
1) 태그 vs ID 중 ID의 우선순위가 더 높다
<header id="intro">
<div class="container">
<h1>header h1</h1>
</header>
#intro h1 {
color: blue;
}
header h1 {
color: red;
}2) 디테일하게 작성할수록 우선순위가 높아짐
<header id="intro">
<div class="container">
<h1>header h1</h1>
</header>
#intro .container h1 {
color: purple;
}
#intro div h1 {
color: pink;
}
#intro h1 {
color: blue;
}
header h1 {
color: red;
} 5. CSS의 여러 속성들
공간의 크기 설정 태그 : width(가로) , height(세로)
1) 가변값의 기준점 (%로 속성값을 작성할 경우 부모의 영향을 미친다)
body 태그는 브라우저와 크기가 동일하다.
div의 부모태그는 body이므로 브라우저의 크기로 인해서 잡힘.
⭐) 부모로 인해 상대값이 측정됨
div {
width: 300%;
height: 300px;
background-color: green;
}2) min, max 값을 설정하여 상한선 주기
div {
width: 300%;
height: 300px;
min-width: 600px;
max-width: 800px;
background-color: green;
}3) 어떤 공간의 테두리 만들 때 사용되는 CSS : border
라운드 처리 하고 싶을 때 : border-radius 속성
div {
width: 300%;
height: 300px;
min-width: 600px;
max-width: 800px;
border: 10px red solid;
border-radius: 50px;
background-color: green;
}4) 폰트 변경
- 폰트 컬러 : color, #, rgb 3가지 방식으로 변경 가능
- 폰트 서체 : font-family
- 기울기 등등 : font-style
- 폰트 굵기 : font-weight
- 글자에 밑줄 적용 : text-decoration: line-through; 글자 중간에 선 생성, 글자 밑줄 text-decoration: underline;, a태그 언더바 삭제 text-decoration: none;
- 구글 폰트 적용법 강의 1:16:00 부터 듣기
- 정렬 바꾸기 : text-align: right; (h1 태그 영역 안에서만 움직인다!)
h1 {
color: gray;
}
h1 {
color: #eaeaea;
}
h1 {
color: rgb(123, 111, 21);
font-size: 30px;
font-style: initial;
font-weight: 300;
text-decoration: line-through;
text-align: right;
<!-- 브라우저 마다 사용 가능한 서체가 적은 순서대로 적용됨 -->
font-family: Arial, Times, sans-serif;
}5) ul태그 list 스타일 삭제
ul {
list-style: none;
}6) opacity 투명도 : 0~1 사이의 값을 갖게 되어있음
div {
width: 300%;
height: 300px;
opacity: 0;
}7) background 이미지 속성
- 이미지 삽입 background-image: url(icon.png);
- 이미지 반복 삭제 background-repeat: no-repeat;
- 이미지 위치 지정 background-position: right top; (속성값 연달아 기입 가능)
<div id="bg"></div>
#bg {
width: 800px;
height: 800px;
background-color: yellow;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: right;
}📍 img 태그 vs background-image태그 차이점 ?
1) 이미지의 형태
background-image태그 : 이미지가 공간보다 작을 경우 이미지가 잘림
img 태그 : 찌그러지기만!
<div id="bg"></div>
<img src="icon.png" width="400" height="200">
#bg {
width: 200px;
height: 200px;
background-color: yellow;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: right;
}2) 정보성을 가지고 있는 이미지를 나타낼때, img태그는 alt 태그 필수!
<img src="icon.png" width="400" height="200" alt="OOO 회사 로고">-> 정보를 가지고 있다면, img 태그를 사용하는 것을 추천 !
📌 오늘의 Tip
✔ sublime 이용시 화면분할 기능으로 사용하면 더 편함 (Alt+Shift+2)
✔ css 주석 처리 방법 : /* */
✔ 공간의 어떤 영역은 투명으로 잡히기 때문에 배경색을 넣어서 배치 작업하기
✔ sans-serif 모든 웹브라우저에서 사용 가능한 폰트이므로 마지막에 항상 적용하기
❔ 어려웠던 것 OR 힘들었던 것
어려웠던 부분은 크게 없었으므로 CSS 속성에 대해서 더 구글링해보았다 !
💡 해결 방법!
https://ofcourse.kr/css-course/CSS-%EC%9E%85%EB%AC%B8
CSS 입문이 참고하기 좋은 사이트를 발견했다.
강의에서 다루지 않은 다른 속성들이 있어 추가적으로 혼자서 더 실습하기 좋았다.
🌱 공부를 마무리하며,
CSS의 여러 속성들을 학습하면서 얼마나 많은 속성들이 더 있을까?🤣 라는 생각이 들었다.
HTML, CSS는 파고들면 한없이 파고든다며 어렵다는 이야기를 어디선가 들었던 것 같은데 !
최근에 우연히 반려동물 라이프스타일 플랫폼인 '바잇미'라는 홈페이지에 들어가게 되었는데, 처음 본 (내 기준 독특한!) 웹페이지 디자인이었다.
신선하기도 하고 디자인의 의도가 궁금해졌다. 앞으로 학습을 더 하고서, 다시 바잇미 홈페이지를 보면 어떤 생각이 들지 궁금하다 :)
