1. 학습내용
css 적용 3가지 방법
1. head 태그안에 style
2. 태그안에 스타일 속성을 추가해서 direct로 css 문법을 작성. 1, 2 방식의 치명적인 단점 : 코드가 많아지면 가독성이 많이 떨어지게 된다.
3. hmtl언어는 hmtl 문서안에 css언어는 css문서안에 따로 관리 두개의 파일을 연동하는 방식(실무)
css는 모두 {}(중갈호)안에 기입
예시 : 대상 { css속성: 속성값;}
html
1.
<style>
h1{
color: red;
}
</style>
2.
<h1 style="background: pink;">Hello World</h1>
3.
<link rel="stylesheet" type="text/css" href="style.css">
css
h1 {
font-size: 80px;
} 
link
외부파일을 가져올때 특히 css파일을 가져올때 html에서는 link라는 태그사용
구글폰트 가져오는법(구글검색후 주소복사)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">부모와 자식, 형제관계
html은 필연적으로 어떤 태그가 다른 태그를 품는 구조를 가질 수 밖에없다.
부모가 color: red 라는 유전자를 가지고있으면 자식한테도 영향을미친다.
부모에게 color: red 라는 유전자를 받았으나 자식에게 직접적으로 color: purple를 주입. 그럴시 부모에게 상속받은 유전자보다 직접주입한 유전자가 더 친숙하기때문에 변함으로 이해 (예시에 p:green도 마찬가지)
부모가 가진 유전자를 모든 자식이 상속받는건 아님. 애초에 태생적으로 친숙한 유전자를 가진 자식도있다(부모의 유전자영향x) - 예시 a태그
부모의 모든 유전자를 받는것도아님. 그중 일부만 전달받게됨(이후에 css속성에서 자세히 설명)
html
<header> (부모)
<h1>header h1</h1> (자식1)
<p>header p</p> (자식2)
<a href="#">네이버</a> (자식3)
</header>
<footer> (부모)
<h1>footer h1</h1> (자식1)
<p>footer p1</p> (자식2)
</footer>
css
header{
color: red;
}
h1{
color: pink;
}
header p{
color: green;
}
header h1,
footer h1 {
color: purple;
선택자
선택자란 css에서 html문서에 접근하는 방법을 말한다.
1. type 선택자
2. id 선택자
3. class 선택자
4. attribute(속성) 선택자
html
-1-
<h1>Hello World</h1>
-2-
<h2 id="test1">Nice to meet you</h2>
-3-
<h3 class="test2">Welcome</h3>
-4-
<input id="test3" type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">
css
-1-
h1 {
color: red;
}
-2-
#test1 {
color: blue;
}
-3-
.test2 {
color: green;
}
-4-
#test3 {
border: solid 10px red;
}
input[type="password"] {
border: solid 10px blue;
}
id선택자(이름)와 class선택자(별명)의 차이는? 별명은 한사람당 여러개의 별명을 가질수 있지만 이름은 하나밖에못함
id선택자를 두개로 하면 오류가나서 적용이안됨
동일한 class명을 하나의 문서안에서 언제든지 재사용가능 그러나 id는 하나의 문서안에서도 하나의 속성값만 있어야함
Q : ID는 하나의 문서안에 하나의 속성값만 이라고 했는데 두개를 했는데도 적용이됨? WHY?
html
<h2 id="color-1 font-style-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>
<p class="bg-1">Welcome</p>
<h4 id=color-3>ID 선택자</h4>
<h5 id="color-2">ID 선택자</h5>
<h6 id="color-2">ID 선택자</h6>
css
.bg-1 {
background-color: red;
}
.font-size-1 {
font-size: 50px;
}
#color-1 {
color: red;
}
#font-style-1 {
font-style: italic;
}
#color-2 {
color: blue;
}
#color-3 {
color: purple;
}
html
<header id="intro">
<div class="container">
<h2>header h2</h2>
<p>header p</p>
</div>
</header>
<p>Out P</p>
css
#intro h2 {
color: red;
}
#intro .container p {
color: blue;
}
Cascading(우선순위)
사용처 : 원본코드를 유지한 상태에서 새로운 css 추가하는 방식으로 디자인을 덮어버리고 싶을때
동일한 선택자를 사용했을경우는 나중에 적용된 속성값의 우선순위가 더높다.
type선택자 vs class선택자 -> class선택자가 우선순위가 더높음
id선택자 vs class선택자 -> id선택자가 우선순위가 더높음
직접적으로 넣는 style속성 vs id선택자 -> 직접넣는 style속성 우선순위가 높다(사진에는 잘못나옴)
html
<h1 style="color : gray;" id="color-2" class="color-1">Hello World</h1>
css
#color-2 {
color : pink;
}
.color-1 {
color : green;
}
h1 {
color: red;
}
h1 {
color: blue;
}
디테일하게 작성할 수록 우선순위가 높음
양쪽 모두 디테일 할때는 div(tag) vs container(class) --> class가 우선순위가 높다.(예시)
html
<header id="intro">
<div class="container">
<h1>header h1</h1>
</div>
</header>
css
#intro .container h1 {
color: pink;
}
#intro div h1 {
color: green;
}
#intro h1 {
color: blue;
}
header h1 {
color: red;
}
css의 여러가지 속성
입문레벨에서 레이아웃 배치 작업할때 background 넣어주면 편함
width와 height 단위를 px로 하면 브라우저를 줄였다 늘였다 해도 항상 크기가 고정되어있음
브라우저 크기에 따라서 자연스럽게 resize되는걸 원하면 px단위 대신에 %로 변경하면됨
div의 부모태그는 body, 지금단계에서 body태그는 브라우저의 크기와 동일하다라고 기억하기.
div100% 하면 부모의 크기에 영향을 받기때문에 브라우저크기를 기준으로100%로 잡히는것. div를 감싸고있는 header태그가있고 header의 width가 500px이면 500px의 100%이다.
min width와 max width는 퍼센테이지를 적용한 width속성안에서 사용됨 계속 늘일때 하염없이 늘어나는게 아니라 최대 max값 이상으로는 안늘어났으면 좋겠다 할때 사용= 상한선, height에서도 적용되는 개념
border-radius : 가장자리 라운드처리
html
<div>
<h1>Nice</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</div>
<a href="#">네이버</a>
css
div {
width: 100%;
height: 300px;
min-width: 600px;
max-width: 800px;
border: solid 10px red;
border-radius: 50px;
background-color: yellow;
}폰트에 영향을 미치는 css속성
color에 헥사코드,RGB도 가능
italic 글자 기울이기, initial 최초상태로 돌아가고 싶다
font-family : 복수서체가능(3개 서체 적용시 앞에서부터 적용가능한 폰트로 적용이됨. 설정하는 이유는 브라우저마다 사용할 수 있는 폰트가 정해져있어서, 항상 마지막은 sans-serif로 끝냄. 그 이유는 모든 브라우저에서 사용가능한 서체
underline 밑줄, line-through 중앙선
align(정렬), 사용시 주의점 h1태그 안에 있는 글자 위치는 핑크색 안 왼쪽 끝에서 오른쪽 끝, 중앙으로 가게됨
opacity 투명도에 영향 1 - 100% 완벽하게, 0 - 0% 안보임
h1 {
color: rgb(123, 111, 21);
font-size: 80px;
font-style: initial;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 100;
text-decoration: line-through;
text-align: right;
background-color: pink;
opacity: 0.5;
}a태그 밑줄제거와 리스트 앞에 .제거
ul태그도 list 스타일의 속성값을 태생적으로 가지고 있음 - none 사용해 제거
a {
text-decoration: none;
}
ul {
list-style: none;
}
background 속성
공간안에 이미지넣기도가능
백그라운드가 가지는 기본적인 특징
공간이 만들어졌을때 이미지크기가 작으면 반복적현상이 일어남.
반복효과제어 - repeat속성 x축으로만 반복 효과를 주고싶으면 repeat-x 반대는 -y
이미지 넣는법 1. img src 와 2. background로 사용하는 방법
1. img로 하면 잘리는현상없음, background는 잘림
background는 액자틀이있는거라 생각. 사진을 집어넣으면 액자보다 크면 잘리게 나오고 작으면 여유공간이있음
2. naver로고처럼 정보를 포함하고있는 이미지는 img로 넣어야함 이유는 웹접근성 때문에 background로 넣으면 시각장애인 리더프로그램은 읽을수가 없음(alt가 없어서)
html
<div id="bg"></div>
<img src="icon.png" width="100px" height="50px" alt="네이버 로고">
css
#bg {
width: 256px;
height: 256px;
background-color: yellow;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: right top;
}
2. 학습 중 어려웠던 점
갑자기 주석처리로 오류가 발생해서 코드가 먹히지 않는 경우가 발생해 당황했다.
3. 해결방법
일단 새로운 파일을 작성해서 강의를 따라갔고 설명처럼 적어놓은 주석들은 다 다른곳으로 이전할 생각이다.
어차피 공부용으로 달아놓은 주석들이고 코드를 깔끔하게 하는 습관도 들인다면 적절한 주석만 다는것이 옳다고 생각해서이다.
4. 학습소감
일단 개발자노트에 덕지덕지 코드를 붙이고 사진을 붙이는 방식은 내가 이 개발자노트를 다시볼때 가독성부분에서 굉장히 떨어지는것 같다.
내일부터는 새로운 방식으로 배운 내용이 있으면 거기서 사용하는 간결한 코드 그리고 작업내용 방식으로 깔끔하게 정리해봐야겠다.
매우 긍정적인 개발자