웹페이지를 아름답게 꾸며주는 CSS에 대해서 알아보자!
(html 실습파일을 그대로 사용.)
📌3. CSS의 등장
CSS를 사용하기 위해서 웹브라우저에게 "html이 아니라 CSS로 해석해야돼"라고 html문법으로 말해주어야 한다.
head태그 안에 style태그가 등장한다.
-
이 웹페이지안에 a태그의 폰트색은 red로 하라는 뜻.
Q.그럼 이렇게 CSS를 사용하면 어떤 장점이 있을까?
-
css중복의제거 가능
->본문에서 모두 폰트색을 바꾸려고 할 때 a태그가 만약 1억개이라도 한번에 폰트색 변경 가능. -
코드의 가독성 증가 및 유지보수의 편의성 증가
- 디자인과 관련된코드는 style태그안에 갖히기 때문에 html은 정보전달에만 집중.
html은 정보전달에만 전념하게 하기위해 디자인을 빼앗아온것이 css🔥
📌4. CSS의 기본 문법
style태그 말고 속성을 사용하는 방법이 있다.
현재사용자가 머물고 있다라는 것을 빨간색으로 표시하고 싶은데 style태그로는 불가능.
a태그에 직접 css코드를 입력한다.
바로 style속성을 사용하여 나타냈다!
강조표시한 a{ } 은 '이 웹페이지에서 누구에게 선택한 효과를 줄것인지'를 '선택한다'라는 점에서 선택자(Selector)라고 한다.
선택자에게 지정될 효과를 나타낸 'color : black; ' 이 부분을 효과(Declaration)라고 한다.
그리고 declaration은 style속성으로 본문에 직접 사용한 경우에는 style속성이 위치하고 있는 곳에 효과를 바로 줄 것이기 때문에 선택자를 사용할 필요가 없다!
-
모든 a태그에 밑줄을 삭제하기위해 text-decoration: none;
(효과지정하고 구분자로 ;세미콜론 꼭 써주기!) -
'1.인천광역시'에만 밑줄을 추가하기 위해 style속성에 underline추가.
📌 5.혁명적변화
이제 내가 모르는 Property(속성) , Value(속성값)을 구글에 검색 할 수 있게 되었다!
📌6. CSS속성을 스스로 알아내기
-
모든 h1태그에 글자크기 조절하기 위해 font-size속성을 사용.
-
모든 h1태그를 가운데 정렬하기위해 text-align속성을 사용.
무엇을 모르는지 알고 있기 때문에
이제 구글에 검색을 해서 사용하면 된다!!👍👍
📌7. CSS선택자의 기본
사용자가 '방문한 적'이 있는 1번 2번 항목을 회색으로 바꾸기
-
1번 2번 항목을 회색으로 만들기 위해서 일단 그룹핑하기위해 class속성으로 두 항목을 묶어준다.
-
보았다라는 뜻에서 값을 saw로 지정한다.
-
그러나 style태그안에 그냥 saw를 쓰면 이웹페이지의 모든 saw라는 태그를 선택자로 지정한다.
앞에 .을 붙여 .saw라고 지정한다.
class의 값이 saw인 태그를 가르키는 선택자가 된다👍👍
현재 머무는 1번 항목만 red로 바꾸기
1. 속성값 saw뒤에 active로 추가.2. .active{ color:red;}
- class의 속성값은 여러개가 들어올 수 있다! (띄어쓰기로 구분)
- 하나의 태그에 여러개의 속성이 들어올 수 있고, 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다!
- 그리고 1번항목에 붉은색인 것은 단순히 .active가 나중에 나왔기 때문이다.
즉 보다 가까이 있는 명령의 영향을 받는다. (saw랑 자리 바꾸면 회색으로 바뀜)
그래서 좀 더 우선순위를 정해줄 때 필요한 것이..
-
a태그 class속성에서 active를 빼서 id속성으로 지정했다.
-
style태그에서 id선택자는 #을 붙힌다. -> #active로 선택!
웹페이지에서 항목이 다 검은색이 아니다!
우선순위 : 😀id선택자 > 클래스선택자 > 태그선택자😀
그리고 id값 active는 유일무이한 값으로서 재사용이 불가능하다.
이제 구글에 CSS Seletor를 검색하여 필요한 선택자를 적용할 수 있다🔥🔥
📌8. 박스모델
-
h1태그에 5px 두께,붉은색,단선을 사용했더니 h1태그는 화면전체를 사용한다는 걸 알 수 있다.
-
a태그에도 똑같이 적용해보니 자기자신의 콘텐츠 부피만큼 사용하는 것을 알 수 있다.
화면전체 사용: block level element
콘텐츠부피만큼 : inline element
- display: inline; 을 추가해서 자신의 부피만큼 사용하게 할 수있다.
(a태그에 display:block;을 추가해서 화면전체를 쓰도록 바꿀 수도 있다.)
- 참고로 display: none; 을 추가하면 아예 태그가 사라져버린다.
- 중복의 제거를 위해 코드를 줄인 모습. 결과에 아무 지장이 없다.
- padding : 콘텐츠와 테두리 사이 간격
- margin : 테두리 사이 간격
- display, width: block 상태인 박스의 넓이를 width로 조절.
구글 박스모델 이미지 검색 보면 한눈에 알 수 있다!👍
- 웹페이지에서 우클릭 - 검사 클릭
html과 CSS가 복잡해졌을 떄 어떤 하나의 태그가 어떤 CSS의 영향을 받는지 손쉽게 알 수있는 '개발자 도구'를 열 수 있다.
📌9. 박스모델 써먹기
- 개발자 도구를 사용하여 h1태그 아래에 단선을 추가한 모습.
- 목록 우측에 단선을 추가한 모습.
개발자 도구를 사용하면 손쉽게 가능!
📌10. 그리드 소개
-
div태그 : 디자인을 목적으로 어떤 의미도 존재하지 않는 태그 (block level element)
-
span태그 : inline element
두 개의 컨텐츠를 나란히 놓기 위해 그리드를 사용할 예정👍
- 일단 컨텐츠부분을 하나로 묶어줄 div부모태그를 적용.
- 그후 id = "grid"라는 id값을 적용
- 스타일태그로 가서 #grid로 테두리를 적용해준다.
-
grid-template-columns: 컨텐츠를 나란히 하나의 culumns으로 배치하기 위해
-
150px 1fr; : NAVIGATION은 창의 크기가 크든 작든 150px만큼의 부피 차지. ARTICLE은 1fr만큼의 부피를 차지함으로써 창의 크기를 조절하면 culumns의 크기가 따라 변한다.
📌11. 그리드 써먹기
-
body에서 h2태그와 p태그를 div태그 묶음
-
ol태그와 div태그를 div id="grid"태그로 묶음
-
스타일 태그에서 #grid{ } 조정해준다.
- 개발자 도구에서 패딩값에 마우스를 올리고 움직여서 적당한 값을 손쉽게 찾을 수 있다.
(여기서 바꾼다고 안바뀜!!)
-
실습하기 좋게 코드를 수정하고 난후 알게된 선택자 하나 더!
#grid ol = #grid를 부모태그 갖는 ol만 영향을 끼친다.
📌12.미디어 쿼리 소개
반응형 디자인 = 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작한다.
개발자도구을 켜고 웹페이지의 크기를 조정하면 화면 우측상단에 화면의 크기가 나온다.
- @media(min-width:800px){ ~~}
화면의 너비가 최소(min) 800px일 때 'div태그의 display를 none 하라'는 뜻.
만약 max라면 800px 너비가 최대 800px까지는 none.
👍어떠한 조건을 만족했을 때만 CSS가 동작하도록 할 수 있다!👍
(스마트폰의 가로모드 세로모드 등...)
📌13. 미디어 쿼리 써먹기
- 화면의 너비가 800px이하로 가면 #grid태그가 block level element로 바뀌기 때문에 전체칸을 다 쓰게 되면서 본문이 아래로 밀렸다.
- 같은 방법으로 화면의 너비가 800px이하일 때 ol태그의 boder-right와 h1태그의 border-bottom을 삭제했다.
📌14. CSS코드의 재사용
내가 만든 웹페이지의 수는 미추홀, 1. 인천광역시, 2. 구월동, 3. 부평 총 4개.
완성된 style태그를 복사해서 모든 웹페이지에 붙여넣기하면 끝!
하지만 하나를 수정하려면 귀찮게 4개의 웹페이지 모두 수정해야한다..🌝
한번만 할 수 있는 방법이 있으니..
-
style.css라는 파일을 만들어서 style태그를 제외한 내용을 모두 다 붙여넣는다.
-
style태그자리에 위같은 link 태그를 붙여넣기한다.
-
웹페이지마다 같은식으로 붙여넣기한다.
-
앞으로 style.css 파일에서 한번만 바꾸면 모든 웹페이지에 작용한다.
(목록에 밑줄을 긋는다는지..)
link 태그로 얻을 수 있는 장점!!
-
css파일에서 한 번만 바꾸면 link태그를 사용한 모든 웹페이지에 적용!
-
각 웹페이지의 style태그 위치에 각각 같은 css코드가 써있더라도 css코드가 장문이라면 같은건지 대조하기가 너무 힘들다. 그 때 link태그 한줄만 써져있다면 손쉽게 확인이 가능하다.
-
코드의 양이 줄었기 때문에 웹페이지를 사용할 때 인터넷 사용료가 덜든다.
-
사실 html안에 직접 css코드를 내장하는 것이 더 적은 트래픽을 사용하므로, 네트워크 적으로 더 효율적이다. 그러나 캐싱이라는 개념이 있다.
-
우리가 한번 css파일을 다운받았다면, 그 파일이 바뀌기 전까지는 웹브라우저는 우리의 컴퓨터에 저장해 놓았다가 그 다음에 css파일을 요청하면, 저장된 결과를 가져와서 속도를 높일 수 있고(네트워크를 안 쓰기 때문) 사업자들은 돈을 덜 쓸 수 있다.
생활코딩 WEB2 - CSS 끝.
