1) 학습내용
오늘은 CSS에 대한 수업을 들었다. html은 많이 들어봐서 익숙했지만 CSS는 아예 처음 접해보는 분야라서 들뜬 마음으로 집중을 했다.
가장 처음에는 이제까지 해왔던 방식인 html에 직접 스타일을 적용을 해보았다.
<head>
<meta charset="utf-8">
<style>
h1 { color: red;}
</style>
</head>
<h1 style="background-color: pink;">HELLO WORLD</h1>
h1이라는 태그를 만들고 그 안에 HELLO WORLD를 입력했다.< head>태그 안에는 < style> 태그를 넣어 h1의 색상을 레드로 주었다.
디자인을 적용하기 위해서는 총 3가지의 방법이 있는데 첫 번째가 방금 작성한 head태그 안에 style태그를 사용한 것이다.
두 번째로는 h1에 style이라는 속성을 추가해서 다이렉트로 지정을 하는 방법이다.
*스타일을 적용할 태그를 작성 후 {}을 사용해주어야 한다.
이 두 가지 방법의 치명적인 단점은 코드가 길어지면 html언어와 css언어가 혼재되어 있어 가독성이 떨어지고, 유지보수가 불편하다. 그래서 실무에서는 html은 html문서 안에 css는 css문서 안에서 작업과 관리를 따로 하고 이 두가지 문서를 연동하는 방식으로 작업을 진행한다.
가장 효율적인 세 번째 방식은 ,
같은 폴더 안에 새로운 파일을 열어 css.style 이름으로 저장을 하고
h1{font-size: 80px;}css문서 안에 h1의 스타일을 작성 하면 된다.
연동을 하기 위해서는 html문서의 < head> 태그 안에
<link rel="stylesheet" type="text/css" href="style.css">이 코드를 작성해주면 된다.
여기에서 rel은 연동되는 파일의 타입 디자인을 담당하는 stylesheet
type : 연동되는 파일의 글자는 css언어로 구성되어 있다 라고 정의
href : 연동된 파일의 경로 입력, html과 같은 폴더 안에 있으므로 파일 이름을 적어줌
*html, css 둘다 저장을 해주어야 적용이 되고, view - layout - columns :2 를 하면 화면 분할이 되어 작업하기 편리하다.
css에서의 주석은 /**/, html과 마찬가지로 주석 안에 주석은 불가능
html
<header>
<h1>header h1</h1>
<p>header p</p>
<a href="#">naver</a>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>css
header{color:red;}
header h1,
footer h1 {color: blue;}
header p,
footer p{color: green;}
css에서 디자인을 적용을 할 때 하나씩 적용해도 되지만 같은 디자인을 지정할 때는 순차적으로 작성해주면 된다.
css는 부모 자식 관계와 유사한데, 부모가 컬러라는 유전자를 갖고 있다면 자식에게도 컬러를 상속을 한다. 그러나 자식에게 독자적으로 다른 컬러 유전자를 주입시키면 상속받은 것 보다 주입된 다른 컬러 유전자가 더 친숙하기 때문에 그 컬러로 변경이 된다. (모든 속성이 상속을 받지는 않음, a태그는 태생적으로 파란색을 가지고 있어 상속받지 않는다.)
부모를 명시함으로써 디테일하게 디자인을 적용할 수 있다. 동시에 적용할 때는 , 사용
html
<h1>hello world</h1>
<h2 id="test1">nice to meet you</h2>
<h3 class="test2">welcome</h3>
<input type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">css
h1 {color: red;}
#test1 {color: blue;}
.test2 {color: green;}
input[type="text"] {border: solid 10px red;}
input[type="password"]{border: solid 10px blue;}
선택자 : css에서 html문서의 특정 영역에 접근하는 방식
- 타입 : html태그를 기준으로 접근할 때 h1 {color: red;}
- 아이디 (id) : 태그에 고유의 이름을 만들 수 있다. #test1 {color: blue;}, 같은 태그이지만 다른 스타일 적용가능, 한 문서안에서는 한 개의 아이디만 존재함.
- 클래스 (class) : 태그에 별명을 붙인다 .test2 {color: green;}, 같은 태그이지만 다른 스타일 적용 가능, 아이디와는 다르게 여러개의 클래스 가능
- 어트리뷰트 (속성) : 타입의 속성값을 가지고 디자인을 적용. input[type="text"] {border: solid 10px red;}
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-1"></h4>
css
.bg-1 {
background-color: red;
}
.font-size-1{
font-size: 50px;
}
#color-1 {
color: red;
}
#font-style-1 {
font-style: italic;
}
캐스케이딩 : 원본 코드를 유지한 상태에서 새로운 css코드를 추가하는 방식으로 디자인을 추가하고 싶을 때, css에서 우선순위에 영향을 미친다. 나중에 작성되는 속성값이 적용이 되고 우선순위가 높다.
우선순위 : 타입 < 클래스 < 아이디 < 속성
위의 경우 아이디는 한 문서에 하나만 존재해야 하는데 아이디가 2개가 있어서 아예 적용이 안된상태이다.
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;
}
디테일하게 작성할 수록 우선 순위가 높다.
예를 들면#intro div h1 {color: green;} / #intro h1 {color: blue;} 중에서는 전자가 더 디테일 하기 때문에 나중에 작성된 후자보다 전자가 적용이 된다.
또 다른 예로 #intro .container h1 {: pink;}/ #intro div h1 {color: green;} 는 둘 다 디테일하지만 클래스와 태그 중 클래스가 더 우선순위이기 때문에 전자가 우선 적용이 된다.
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>이 경우에는 아이디, 클래스가 있지만 style 속성값이 가장 우선순위라 gray로 출력이 됨
html
<div>
<h1>Nice</h1>
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
</ul>
</div>css
div{
width: 100%;
height: 300px;
min-width: 600px ;
max-width: 800px;
border: solid 10px red;
border-radius: 50px;
background-color: yellow;
opacity: 1;
}
h1 {
color: hotpink;
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;
}
ul {
list-style: none;
}
div
background-color: yellow; - div 공간의 크기를 만들 때 width, height를 지정해도 기본적으로 투명하게 나타나기 때문에 백그라운드 컬러를 지정해주면 덜 헷갈린다.
px를 사용하면 브라우저의 사이즈 상관없이 고정값이 되고
%를 사용하면 가변성이 있고 리사이징이 된다
(*%를 사용할 때는 부모태그를 기준으로 상대값으로 책정이 된다. 여기에선 div의 부모태그는 < body>임)
min-width: ; / max-width: ; 는 %를 적용한 width속성 안에서 사용, 리사이징을 가능하게 하지만 최소값과 최대값을 지정해주는 속성
border: solid 10px red; - 한번에 3가지의 css속성값을 기입 가능, 순서는 상관 없다. 선의 종류, 굵기, 색상 순
border-radius: 50px; - 모서리의 라운드 적용 하는 속성
opacity: 1; - 투명도 (0과 1사이의 값)
h1
color: hotpink; - 폰트 색상
font-size: 80px; - 폰트 크기
font-style: initial; - 최초상태
font-family - 'Noto Sans KR', sans-serif; -폰트 서체, 사용가능한 폰트로 적용이 된다. sans-sefif는 거의 모든 브라우저에 지원이 가능
font-weight- 100; - 폰트 굵기
text-decoration- line-through; - underline, line-through
text-align - right; - left, center, right 정렬(속해있는 태그 안을 기준으로)
background-color: pink; - 영역 확인을 위한 배경 설정
ul {list-style: none;} - ul은 태생적으로 앞에 ∙ 있는데 삭제를 하고 싶을 때 사용
html
<div id="bg"></div>
<img src="icon.png"
width="100px" height="50px" alt="네이버 로고">
css
#bg {
width: 900px;
height: 900px;
background-color: yellow;
background-image: url(icon.png);
background-repeat:no-repeat;
background-position: top left;
}
< img src="icon.png"
width="100px" height="50px" alt="네이버 로고"> : html에서 이미지를 불러올 때
alt값을 주어야한다(웹접근성과 관련됨), width, heigth값을 바꾸면 비율은 변하지만 이미지가 잘리는 현상은 없다. 정보를 가지고 있는 이미지를 사용할 때 사용하는 태그
background-image: url(icon.png); - css에서 배경을 이미지로 설정할 때, width, height를 액자에 비유를 하면 액자틀 안에 백그라운드 이미지를 끼워 넣는 것, 액자틀보다 사진 크기가 크면 사진이 잘리게 된다. 액자틀과 이미지 사이즈를 갖게 하면 딱 맞게 나온다. 데코레이션 용도로 이미지를 사용할 때 사용한다.
background-repeat:no-repeat; - 이미지를 반복할 것인지 여부, repeat-x, repeat-y, repeat, no-repeat
background-position: top left; - 이미지의 위치 조정, left, right, center, right bottom, right top
- 어제 수업한 설계도면을 만들어 css를 적용시켜보았다.
2) 어려웠던 점
캐스케이딩 (우선순위) 부분을 배울 때 헷갈림이 있었다. 일단 아이디는 #, 클래스는 . 이 둘이 자꾸 헷갈린다.
3) 해결방법
개발일지를 작성하면서 머리에 주입시켰다.
4) 학습소감
css에 관심이 있었는데 이제 배우게 되어서 너무 기쁘다. 그리고 오늘이 되어서야 개발일지를 왜 쓰는지 이해가 됐다. 개발일지를 쓰면서 하루 동안 배운 것들을 복습하고 모르는 부분은 다시 돌려가며 보고, 내가 글을 썼기 때문에 나만 이해할 수 있는 부분이 있지만 (ㅋㅋㅋ) 일단 이해는 되니까 글머리가 없어도 괜찮다.
한번 더 돌려봐야겠다.
