WEB2 CSS
2
웹페이지를 아름답게 만드는 방법
- 쉽지만 한계가 있는 방법 - font태그 등
- 어렵지만 근본적인 해결책 - CSS
1번 방법으로 어려운 이유
- font 태그는 웹페이지에서 대한 어떠한 정보도 없음 → 웹페이지가 정보로써의 가치가 떨어짐
- 웹페이지가 많을 경우에도 디자인 일괄처리가 어려움
3
웹브라우저는 기본적으로 HTML이라고 생각함 → HTML로 CSS코드로 읽어야 한다고 설명해야 함
<style>→ : HTML 문법, 태그안의 문장을 CSS문법에 맞게 처리함
ex) a { color : red; }
CSS를 사용하기 위해서는 사용자는 새로운 문법을 배워야 하며, 웹브라우저는 CSS를 해석하는 기능을 탑재해야함
→ 그럼에도 불구하고 CSS를 사용하는 이유
- 일괄처리가 쉬워짐
- 중복을 제거하면 웹페이지 규모 줄일 수 있음
- HTML 태그를 사용하면 수정할 때 작성자 의도와 다르게 바꾸면 안 될 것을, CSS를 사용하면 바꿀 수 있음
- 정보와 디자인의 구분이 명확하므로 웹이 정보를 처리하기가 쉬워짐
즉, 웹페이지 유지, 보수가 쉬워지고 가독성이 높아진다는 장점이 있음
4
CSS효과를 주는 법
- HTML, style 속성 : 태그의 style속성의 값을 웹브라우저가 css문법으로 해석하고 해당 태그에게 효과 적용
- 선택자selector : 웹페이지 안에 모든 해당 태그를 선택한다
- 선언declaration : 선택자가 지정한 태그들에 줄 효과를 지정하는 부분.
속성property : 값property value으로 구성됨
<!--방법1-->
<body>
<h3 style:"color:red;">
[h3의 내용](style 태그에 의해 텍스트의 색상이 붉은 색으로 변경되었다)
</h3>
</body> <!--방법2-->
<head>
<style>
a { /*선택자 : a */
font-size:20px; /*선언, 속성:font-size, 값:20px으로 이루어짐*/
}
</style>
</head> +) ;은 구분자
5
CSS에 대해 배울 것을 크게 두 가지로 나누어 배운다
- 어떤 효과가 존재하는지(declaration의 property)
- 그 효과를 정확하게 선택하여 지정하기 (selector)
6
(5의 효과에 대하여 배움)
property 검색 방법 : CSS (원하는 것) property
7
selector
특정 태그들에 효과를 주고 싶을 때는, html 태그에 class라는 property를 주고 그 class를 selector로 사용한다.
class 특징
- class의 value는 여러 개가 올 수 있고 띄어쓰기로 구분 가능하다
- → 하나의 태그에 공동으로 여러 효과를 지정할 수 있음(밑의 예시 참고)
→ 이 경우에 둘 이상의 태그에 같은 효과를 줄 때 뒤에 있는 효과만을 적용하기 때문에 좋지 않은 방법
→ 따라서 우선하여 주고 싶은 효과가 있을 경우, id selector를 사용하자 - id selector가 class selector보다 우선순위가 높기 때문)
한 태그에 여러 효과를 주는 예제
<head>
<style>
cl {
font-size:20px;
}
c2 {
color:red;
}
</style>
</head>
<body>
<div class="c1 c2"> <!--하나의 태그에 공동으로 여러 효과를 지정할 수 있다-->
[div의 내용]
</div>
</body>왜 id > class > tag 우선순위일까?
- id는 웹페이지 당 한 번만 사용할 수 있는 중복되지 않는 것 : 구체적
- tag : 포괄적
- tag를 이용하여 전체적으로 디자인하고 예외적인 것만 id를 사용하여 디자인하는 것이 효율적이기 때문이다
우선순위가 같을 때 예제
<head>
<style>
h3 {
color:red;
}
h3 {
color:blue;
}
</style>
</head>
<body>
<h3>h3 내용</h3>
</body>결과
우선순위가 다를 때 예제
<head>
<style>
#i {
color:pink;
}
.c {
color:blue;
}
h3 {
color:red;
}
</style>
</head>
<body>
<h3 class="c" id="i">h3 내용</h3>
</body>결과
정리 : 우선순위가 다르다면 우선순위에 따라 속성이 적용되지만, 같은 우선순위일 때는 뒤에 있을 수록 우선순위가 높다.
8
밑의 예제를 보면 h1 태그는 해당 줄을 전체 사용하고, a 태그는 똑같은 태그 임에도 불구하고 줄바꿈이 되지 않고 다른 내용들과 같은 줄에 위치한다
<head>
<style>
h3 {
border : solid 5px pink;
}
a {
border : solid 5px deepskyblue;
}
</style>
</head>
<body>
<h3>h3</h3>
<a>a</a>
</body>결과
어째서 태그에 따라 줄바꿈 여부가 바뀔까?
→ HTML에 있는 여러 태그들은 그 태그의 성격과 일반적인 쓰임에 따라서 화면 전체를 쓰는 것이 편할수도, 자기 크기 만큼의 부피를 갖는 것이 편할수도 있기 때문이다
- 화면 전체를 쓰는 태그 : block level element(element = tag)
- 자기 자신의 부피만큼 크기를 갖는 태그 : inline element
- CSS의 display property을 이용하여 이 설정을 변경할 수 있다
(display property value를 none으로 하면 보이지 않음)
다른 선택자, 같은 property일 때 중복 제거 방법 : ,를 사용하면 줄일 수 있음
<style>
h3, a{
color : red;
</style>같은 property category 다른 property 일 때 중복 제거 방법
<style>
border-width : 5px;
border-style : solid;
border-color : red;
</style><style>
border : 5px solid red;
</style>
박스모델 이해
- 테두리와 내용 사이의 간격 : padding
- 테두리들 사이의 간격 : margin
- display 속성(block level element, inline)의 특징을 변경하는 것은 width를 이용하여 태그의 가로 길이를 변경하는 것이다.
웹페이지에서 css 적용범위을 알아보고 싶다 : 우클릭 → 검사(또는 F12)
HTML 태그 하나하나를 박스로 취급하여 그것의 부피감 결정하는 것은 디자인의 핵심적인 요소이다
9
실제로 예시대로 만들어보았다
여백 문제가 발생하였을 때, 제일 먼저 해야할 것은 문제에 가까이 다가가는 것이다
우클릭 → 검사로 문제의 원인을 발견하고 그것을 수정해야 한다
10
레이아웃을 잘 짜는 방법 - grid
div(block level element), span(inline element) : 디자인을 위하여 존재하는 의미가 없는 태그
grid 사용법
예시(나중에 관련 예시 추가하기)
caniuse.com : 해당 기술을 사용할 수 있는 웹브라우저 안내
11
id가 정해진 태그 안에 존재하는 특정 태그만을 선택하여 효과를 적용할 수 있다
ex) #grid ol{} → grid라는 id안에 존재하는 ol 태그를 선택
12
웹은 모든 시스템에서 동작하는 정보 시스템 → 수많은 화면에서 동작해야함 → 화면별 페이지를 만들어야 했음
→ 반응형 디자인 탄생 : 화면 크기에 따라서 웹페이지의 각 요소들이 반응하여 동작
→ 반응형 디자인을 CSS에서 구현하는 핵심적인 기능 : mediaquery
화면의 크기가 800px 이하일 때 display가 none인 예시(나중에 관련 예시 추기하기)
14
style 태그를 .css 파일로 변경하고 style 태그 위치에 link 태그를 이용하여 .css 파일이 적용되도록 하기
이 방식의 장점
- 웹페이지 디자인을 일괄적으로 수정 가능
- 재사용성 : 각 웹페이지 별로 style이 적용되었을 때 웹페이지 별로 적용된 style이 같은 것인지 다른 것인지 파악이 쉬움 → 시각적인 기능성이 높아짐 → 내부 구현 코드를 몰라도 사용 가능 → 재사용성이 높아짐
- 경제적인 이득 : 코드 양이 줄었기 때문에 웹페이지 사용료를 줄일 수 있음
- 우클릭 → 검사 → network에서 확인 관련 내용 확인 가능
- 웹페이지 안에 css 코드를 삽입하는 것이 네트워크 트래픽을 적게 사용
→ 캐시cashe 방식 사용 : 한 번 .css 파일을 다운 받았다면 그 파일이 수정되기 전까지 웹브라우저는 우리의 컴퓨터에 저장하였다가 파일을 요청하면 저장된 결과를 가져와서 속도를 높이고(네트워크를 사용하지 않기 때문) 돈을 절약할 수 있음
15
많이 사용해보자!
만들어보았다 - 오박사
원본
코드 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>잠깐!</title>
<style>
body {
text-align: center; font-size: 4.5em; font-family: "koverwatch";
}
#poket{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
border-top: dashed 5px;
}
#poster {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
div, #oh {
display: block;
margin:auto;
}
img {
padding: 2em 2em 0em 0em;
}
</style>
</head>
<body>
<div id="poster">
<img src="오박사.jpg" alt="오박사" width="500em;" id="oh">
<div>
오늘은 바깥이 너무 덥구나!<br/>
모두 시원한 녀석들이니 하나를 데려가렴
</div>
<div id="poket">
<img src="꼬부기.png" alt="꼬부기" width="500em;">
<img src="라프라스.jpg" alt="라프라스" width="500em;">
<img src="갸라도스.png" alt="갸라도스" width="500em;">
<img src="리아코.jpg" alt="리아코" width="500em;">
<img src="물짱이.png" alt="물짱이" width="500em;">
<img src="팽도리.jpg" alt="팽도리" width="500em;">
</div>
</div>
</body>
</html>결과
예전에 봤던 포스터가 생각이 나서 오늘 배운 것을 응용한 포스터를 만들기로 하였다. 목표는 화면 크기에 따라 변하는 포스터! 그래서 다음과 같이 구현하였다.
- body selector : 폰트 정렬, 크기, 글꼴을 디자인하였다.
- poket selector : 지금보니 pocket인데 오타났네... grid를 이용하여 밑에 포켓몬을 같은 비율로 정렬하고자 하였다. 위에는 점선을 추가하여 전에 보았던 포스터와 비슷한 모양으로 만들었다
- poster selector : grid를 이용하여 오박사/대사/포켓몬사진을 같은 비율로 정렬고자 하였다.
- div, oh selector : margin property를 auto로 하면 가운데 정렬이 가능하다. 어째서인지는 아직 의문
- img selector : 위, 오른쪽에 여백을 주었다
- div id = "poster" : 전체적으로 오박사/대사/포켓몬사진을 같은 비율로 정렬하고자 감싼 태그
- div id = "poket" : 포켓몬사진을 같은 비율로 정렬하고 감싼 태그
- 후기
처음에 포켓몬 사진의 크기를 지정하지 않고 실행하였을 경우 grid를 적용하면 각 사진의 원래 크기가 적용되었다. 내가 원하는 것은 같은 가로 길이를 가지는 것이어서 width를 500em으로 주었더니 반응형 디자인을 만들 수 없었다. 반응형 디자인 부분은 아직 자세히 공부하지 않았기 때문에 배운 후에 다시 시도하기로 하였다.
'기초공부 > WEB' 카테고리의 다른 글
| [JavaScript]생활코딩 클라이언트 - 웹브라우저 자바스크립트 정리 (0) | 2019.03.31 |
|---|---|
| [JavaScript]생활코딩 언어 - 자바스크립트 정리 (0) | 2019.03.25 |
| [HTML5]이미지 태그, 오디오 태그, 비디오 태그 (0) | 2019.03.20 |
| [HTML5]표 태그 (0) | 2019.03.20 |
| [HTML5]목록 태그 (0) | 2019.03.20 |
