1. web2-css 수업소개
web1 html을 보고나서 이 수업을 들어야한다.
html-전자문서, 컴퓨터로 정보를 표현하고 인터넷을 통해 전세계 누구나 볼 수 있게됨.
css- 웹페이지를 좀더 아름답고 보기좋은 형태로 만들기 위한 수업.
수업의 내용
1. CSS의 기본 문법 (선택자와 속성)
2. Grid를 이용한 현대적인 레이아웃 제작 방법
3. MediaQuery를 이용해서 다양한 크기의 스크린에 대응하는 방법
2. css가 등장하기 전의 상황
html의 한계 >html에 꾸미는 태그를 추가해도 한계가 있음> 근본적인 한계를 극복하기위해 CSS 등장.
html은 검색엔진에게 중요한 정보를 전달.
css는 디자인을 나타낼 뿐.
3. css의 등장
* <!-- 글자 --> : 기호 사이의 컨텐츠 무시
html과 css는 완전히 다른 컴퓨터 언어이다.
웹브라우저는 html언어사용.
css를 사용할때 html 언어로 알림 <style></style> : css라는 언어의 문법에 맞게 해석해서 처리하라.
<style>
a {
color:red;
}
</style>
a라는 태그에 빨간색을 입힌다.
html을 사용하는것보다 css를 사용하는 것은 사용자의 학습의 부담과 고도의 기술을 요구하게된다.
하지만 css를 사용할 경우 폭발적인 효과를 얻을 수 있기에 css가 고안된 것이다.
css의 장점 : 수십가지의 태그를 한번에 고칠 수 있다. > 중복의 제거(규모가 커질수록 중요해짐) , 웹페이지 유지보수에 용이(수정 쉬워지고 가독성 높아짐), 디자인과 관련된 코드는 <style>에 갇혀 있기때문에 작업에 따라 style을 무시하고 정보만을 취할 수 있다.
4. CSS의 기본 문법
CSS를 표현하는 방법에는 <style> 태그를 사용하는 방법과 속성을 사용하는 방법이 있다.(두 가지)
<style>은 개별적인 태그에 색깔을 입힐 수 없다 > html태그에 속성으로 color:red 삽입한다.
그런데 이렇게 하면 웹브라우저 입장에선 이것이 html인지 css인지 알 수가 없다. > style="color:red"를 속성으로 인라인으로 넣는다.
<style>
a {
color:black;
}
a{} =선택자 =selector
color:black; = 효과 지정=declaration=선언
html태그에 style을 속성으로쓰면 그 태그에 효과를 주기 때문에 선택자를 사용할 필요가없다.
밑줄 없애는 법 a태그의 모든 밑줄이 없어진다.
<style>
a {
color:black;
text-decoration: none;
}
세미콜론 ; =디스크립션이 시작되고 끝나는 것을 구분, 효과를 지정한 다음엔 끝에 ;을 쓴다.
밑줄을 한 선택자에 속성으로 쓸 경우
style="color:red;text-decoration:underline"
5. 혁명적인 변화
셀렉터 = ex)이 웹페이지의 모든 a라는 태그를 선택한다.
데컬러레이션 = 선택자가 지정하는 태그들에 대해서 어떤 효과를 줄것인가에 해당.
color(property,속성)
red(property value,속성의 값)
6. css 속성을 스스로 알아내기
h1 제목의 크기를 키우고 가운데 정렬을 하고 싶다.
검색 추천어 : css text size property
h1 {
font-size:45px; text-align: center;
}
외우지 않아도 1분이면 속성을 검색해서 알아낼 수 있다.
스펠링을 몰라도 에디터가 단어를 추천해준다.
7. css 선택자의 기본
css를 지배하는 두 가지 중요한 토대가 있다.
1. 효과 2. 선택자
지난시간에 효과 이번시간에 선택자의 토대를 닦는 시간이다.
기획
1.웹페이지의 모든 폰트를 검정색으로 한다. a{ color:black;
2.링크에 들어간적이 있는 폰트는 회색으로 한다. > 스타일태그를 인라인 속성으로하면 중복된다.
>회색으로 지정하려는 html과 css를 그룹으로 지정해서 폰트 컬러를 회색으로 준다. ( 두 태그에 class라고하는 html의 속성을 준다. 속성의 값으로 saw라고 지정한다. > class="saw" > 스타일 태그에 .saw(class 값이 saw인 태그 (class는 묶는다,그루핑한다는 의미이며 앞에 점.을 붙이면 이 웹페이지에 있는 모든 클래스가 saw인 태그를 가리키는 선택자가 된다.))
3.현재 페이지 링크는 빨간색으로 한다. > css태그의 클래스에 saw active를 적은뒤 스타일 태그에 .active에 컬러를 지정해준다.(class라는 속성의 값은 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분한다. 하나의 태그에는 여러 개의 속성이 들어올 수 있고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.)
(만약 .active를 .saw보다 앞에 쓴다면 회색이된다. > 보다 가까이에 있는 명령이 더 큰 영향력을 갖는다.
>id 선택자를 사용한다. class="saw" id="active" > 스타일태그에 #active를 사용 > #active가 .saw보다 뒤에 등장했음에도 불구하고 붉은색이 된다 .즉 id 선택자와 클래스 선택자 중에선 id선택자가 우선순위이다. 클래스 선택자와 태그(a) 선택자 중에선 클래스 선택자가 우선순위다.)
선택자 우선순위 : 태그<class<id
선택자가 같을 때 우선순위 : 가장 마지막에 등장하는 선택자가 우선순위가 높다.
우선순위의 원리 :
id라는 선택자가 이 웹페이지에 한번만 등장하면 그다음엔 active라는 값은 쓰면 안된다.
id의 값은 단 한번만 등장해야한다. 즉 다른 곳에서는 id값이 active가 나오면 안된다.
a태그를 가리키는 선택자가 id값이 active인 태그만을 가리키는 선택자보다 포괄적이다.
css는 좀 더 구체적인 것을 포괄적인것보다 우선순위를 높였다.
전체적인 디자인을 하고 그 중에 예외적인것을 id를 지정하는것이 훨씬 더 효율적이기 때문이다.
검색어 : css selector
element=태그
<style>
a {
color:black;
}
.saw {
color:gray
}
#active {
color:red
}
</style>
8. 박스 모델
박스모델 : html 태그 하나하나를 일종의 박스로 취급해서 부피감을 결정하는 디자인의 핵심 요소.
우리가 만들 웹페이지 기획안
-WEB(파란색, 크게)
수평선
-HTML HTML
-CSS 수직선 내용
-JavaScript
h1 태그는 전체를 사용하여 줄바꿈이 되지만 a태그는 줄바꿈이 없음. 제목은 화면 전체를 쓰는것이 편리하지만, 링크는 줄바꿈이되면 불편해짐 이 h1의 범위를 알려면 테두리를 그려보면된다. h1와 a의 테두리 입혀 확인.
<style>
h1, a{
border-width:5px;
border-color:red;
border-style: solid;
padding: 20px;
margin: 0;
width: 100px
display : inline;
}
</style>
css의 주석 : /* 글 */
element : 태그
border(테두리)- width(두께) /color(색깔) /style(스타일 단선,점선,실선...)
h1태그 범위: 화면 전체를 씀
a태그 범위: 자기 콘텐츠만큼의 부피를 씀.
block level element : 화면 전체를 쓰는 태그
inline element : 자기 컨텐츠만큼의 크기를 가지는 태그
display : inline; 을 사용하면 block level elenet를 inline element처럼 자신의 부피만큼을 쓰게 할 수 있음.
display : none; 을 사용하면 태그들을 보이지않게 할 수 있음.
콤마, 선택자 : 코드의 중복을 제거할 수 있음.
border-width:5px;
border-color:red;
border-style: solid; 를 border : 5px solid red;로 줄일 수 있음. 순서는 상관없음.
padding : 콘텐츠와 테두리 사이의 간격
margin : 테두리와 테두리 사이의 간격
width : 폭 (테두리의 폭)
검색엔진 - css 박스 모델 이미지 검색
웹페이지 우클릭 - 검사 - styles(태그가 어떤 css스타일의 영향을 받고 있는가)
어떤 하나의 태그가 어떤 css의 영향을 받는지를 찾기가 어려울 때 사용할 수 있는 개발자 도구
100 x 36 : 100px의 폭에 36 높이
9. 박스 모델 써먹기
우리가 만들 웹페이지 기획안
-WEB(파란색, 크게)
수평선
-HTML HTML
-CSS 수직선 내용
-JavaScript
1. 수평선을 그리기 위해서는 테두리를 이용한다.
2. 애매한 수평선의 위치는 개발자도구로 확인하면 margin값의 영향임을 알 수 있다.
3. 수평선과 제목의 간격을 띄우기 위해 padding값을 지정한다.
4. 수직선은 목차의 오른쪽 테두리의 픽셀과 색깔을 지정하고 폭을 줄여준다.
5. 여백을 없애기 위해 margin을 0으로 하고 패딩값을 준다.
6. body태그 또한 margin 값이 있어 끝에 여백이생김. 0으로하면 화면 전체에 선이 채워짐.
<style>
body {
margin : 0;
}
h1 {
border-bottom : 1px solid gray;
margin : 0;
padding : 20px;
}
ol {
border-right : 1px solid gray;
width : 100px;
margin : 0;
padding : 20px;
}
</style>
10. 그리드 소개
최근에 등장한 기술 그리드
<div> </div>: division, 아무런 의미가 없는 그저 디자인의 용도를 갖는 태그, 기본적으로 block level element이기 때문에 화면 전체를 쓴다. 줄바꿈O
<span></span>: div태그와 같음. inline element.
<style>
#grid {
border:5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div{
border : 5px solid gray;
}
</style>
<body>
<div id="grid">
<div>네비게이션</div>
<div>아티클아티클아티클아티클아티클아티클아티티클아티클아티클</div>
</body>
1. div태그로 글을 쓴다.
2.div의 부피감을 알기위해 테두리를 지정한다.
3. div태그를 감싸는 부모태그를 지정한다. 그리고 id 값을 부여한다.
4. id값이 grid인 태그에 대해서 테두리에 핑크 색상을 지정한다.
5. display 속성
6. grid-template-columns 속성으로 네비게이션과 아티클을 하나의 칼럼에 배치한다.
첫번째 칼럼은 네비게이션, 아티클은 나머지 공간을 쓰도록 한다.
네비게이션은 150px사이즈로 고정되고 아티클영역은 자동으로 커진다.
1fr 1fr = 두칼럼은 같은 크기가 된다.
앞을 2fr로 하면 화면 전체를 3fr로 했을 때 네비게이션은 2만큼 아티클은 1만큼 화면 전체를 쓰게 자동으로 조정된다.
그리드를 쓰면 좋은점
텍스트가 많아짐에 따라 네비게이션의 테두리와 아티클테두리가 자동으로 커진다.
최신css기능을 현재 사용해도되는지 아닌지 데이터에 근거하여 알아볼 필요가 있다.
caniuse.com 이 사이트는 여러 css나 html 또는 javascript의 기술들 중에서 현재 웹브라우저들이
얼마나 그기술을 채택하고 있는가에 대한 통계를 보여주는 서비스이다.
지원 웹브라우저, 사용자 통계/아주 유용하고 중요한 사이트임.
11. 그리드 써먹기
columns : 열
row : 행
1.목차와 단락을 칼럼으로 나누고자한다.
2.두태그는 독립적이기 때문에 묶어줄 필요가 있다.
3.묶어줄때 h1,li,a등 쓸 수없다. 의미와 기능이 있기 때문에.
그럴 때 div를 사용한다.
4.제목과 단락을 div로 묶어주고 목차와 단락까지를 div로 묶어준다.
5.칼럼을 나눈다.
6. 목차의 정렬을 가운데로한다. 박스모델을보면 패딩값이 왼쪽 20px임을 볼 수있다.
7. 박스모델 수치를 더블클릭해서 픽셀을 조정해서 위치를 조정해본다.
8. ol값의 패딩 레프트 33px로 조정.
9. 오른쪽 칼럼 글이 밀리게된다.
10.오른쪽 칼럼의 div값에 id값을 부여한 후 패딩레프트 값을 조정한다.
11. 아티클 위 ol로 패딩값 조절한것 좋은 방법이 아니다. ol이 네비게이션 역할을 하고 있는데 ol이 나중에는 네비게이션이아니라 본문에도 목록이 있는 리스트가 포함될 수도 있다.
12. grid값을 가진 id의 밑에있는 태그 라는 의미인 #grid ol{} 을 사용한다 부모가 grid인 태그를 선택하는 선택자가된다.
13. #grid #article{패딩값} 과같이 묶어줄 수도있다. 의미를 분명히 하기위해서
12. 미디어 쿼리 소개
반응형 디자인과 미디어 쿼리 소개
화면의 크기에 따라 디자인과 단락의 위치가 바뀐다.
반응형 웹(반응형 디자인,Responsive Web) :
화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 최적화 된 모양으로 바뀌게 하는것.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1 - HTML</title>
<style>
div{
border : 10px solid green;
font-size : 60px;
}
@media(min-width:800px){
div{
display: none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
1.mediaquery.html 파일 생성
2.기본 html 코드 작성
3. body에 div태그 Responsive작성
4. head- style에 모든 div태그에 테두리,폰트 크기 지정
5. 화면의 크기에 따라 div태그를 보이거나 안보이게 하려면 화면의 크기를 알아야함.
구글 개발자도구 - 검사 -화면 크기를 조절해보면 크기를 알 수 있음.
6. min 화면이 800px보다 크다면 div 디스플레이를 숨긴다.
7. max를 사용할 경우 800px이하에서 div를 숨긴다.
13. 미디어 쿼리 써먹기
미디어 쿼리를 이용해서 반응형 디자인 구현하기
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
예)
1. css웹페이지에서 칼럼이 나뉜 것을 화면이 작아지면 칼럼을 아래로 배치하도록 할것.
2. @media에서 #grid를 display grid에서 block으로 지정.
3. 오른쪽 수직 테두리를 지우기 위해 ol-right를 none으로 지정.
4. 수평 테두리를 지우기 위해 h1-bottom none으로 지정.
14. css의 재사용
css페이지의 코드를 다른 페이지에도 적용하기
비주얼 스튜디오 >파일 우클릭 >split right =화면 나란히 놓고 보기
방법1.
1. style의 태그를 옮긴다.> 똑같지 않음.
2. 아래의 div와 id태그를 똑같이 옮겨준다.
3. > 중복이 너무 많아진다.
방법2.
1. style의 style을 제거한 순수한 css코드만을 따로 복붙하여 작성한다. style.css
2. <Link rel="stylesheet" href="style.css">를 head 태그에 입력한다.
= 웹브라우저에게 이 위치에 style.css라는 별도의 파일에 저장된 css를 다운로드 받아서
여기에 원래 그 코드가 있었던것처럼 동작하라는 의미.
웹브라우저는 style.css파일을 다운로드 받아서 그것을 이 웹페이지에 적용하게 됨.
만약 이 웹페이지의 모든 링크에 밑줄을 넣으라고 하면 style.css라는 공통적으로 사용되고있는 파일로 가서
거기에 있는 코드만 지워주면 모든 웹페이지에 이 효과가 적용되는 폭발적인효과를 얻게 된다.
css파일만 있으면 css파일이 가진 시각적인 기능성을 사용할 수 있게된다.
즉 재사용성이 높아지고 사용하는 입장에서 내부적인 코딩의 원리를 몰라도 사용할 수 있게된다.
코드가 1억게가 넘어도 css하나만 변경하면 되는 효율성을 가지게된다.
코드의 양이줄었기 때문에 인터넷 사용료를 덜 낼 수 있다는 경제적 효과.
여러개의 파일을 별도로 바깥에 두고 그것을 다운로드 받는것과 그냥 웹페이지 안에 css코드를 내장하는 것 중에서 네트워크적인 측면에서 더 효율적이고 더 적은 트래픽을 사용할까 > 웹페이지 안에 css를 직접 놓는것이 그것 자체로는 더 효율적임.
하지만 지금부터 설명드릴 테크닉(캐싱) 때문에 그렇지 않다.
캐싱=저장하다
즉 우리가 한번 style.css라는 파일을 다운로드 받았다면 저 파일이 바뀌기 전까지는
style.css란 파일을 이 웹브라우저는 우리의 컴퓨터에다가 저장해 놓았다가 그다음에 style.css파일을 요청하면 저장된 결과를 가져와서 속도를 높일 수 있고(네트워크를 안쓰기 때문에)
사업자들은 돈을 덜 쓸 수있는 중요한 효과를 얻게 된다.
이 캐시로 인해서 이 style.css 파일을 캐싱할 수 있게 되면 결국에는 훨씬 더 빠르게 웹페이지를 보여줄수
있으면서 네트워크 트래픽, 다시말해 사용료를 훨씬 더 적게 낼 수 있다는 중요한 효과를 얻을 수 있다.
가급적 css파일을 만들었다면 이렇게 별도의 파일로 꺼내서 중복을 제거하는 것을 추천드리고 싶다.
15. 수업을 마치며
지금까지 우리는 css를 지배하는 중요한 규칙을 배웠다.
그중에 가장 중요한것은 역시 선택자와 속성이다.
속성을 많이 알수록 풍부한 표현력을 얻게되고
선택자를 많이 알수록 알고 있는 속성을 더 정확하게 표현할 수 있게된다.
지금은 공부한것을 써먹기 좋은 타이밍이다.
써먹다보면 디자인적으로나 기술적으로 부족한 부분이 보이기 시작할 것이다.
그것에 대해 질문하고 검색하고 고민하다보면 여러 개념들이 연결되고 스스로 깨달아가게된다.
16. Long take 버전
코딩장면만을 담은 버전의 영상. 복습용. 음악과 배속으로 보면 덜 지루함.
https://youtu.be/wcrgIwzerks?si=pDNodF9c5I5qATSg
프로그래밍/생활코딩
생활코딩 WEB2-CSS 필기
반응형
반응형