[생활코딩] WEB2 - CSS
🤓 본 내용은 생활코딩 WEB2 - CSS의 강의를 수강하며 정리한 글입니다.
1. 수업 소개
웹 문서를 더 아름답게 만들어 보자!!! "아름다움"
2. CSS가 등장하기 전의 상황
<font color="red">글자</font>
<font color="red">글자</font>이런식으로 하나 하나의 정보를 하나씩... 바꿔주곤 했다..
3. CSS의 등장
태그를 하나 하나 추가하는 것보단 어렵지만 "근본적인 해결책" CSS가 등장하게된다.
CSS를 사용한다면 수 많은 해당 태그의 글자의 스타일을 한번에 바꿔줄 수 있다.
이는 웹 페이지 유지보수를 더 용이하게 만듦을 의미한다.
배운 코드
<!-- HTML 주석 -->
/* CSS 주석 */
<html>
<head>
<title>a태그 글자 색 바꾸기</title>
<style>
a {
color:black;
}
</style>
</head>
<body>
<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>
</body>
</html>4. CSS의 기본 문법
만약 접속하고 있는 페이지가 1.html라고 가정해보자.
1.html을 접속하고 있다는 표시를 하기 위해 1.html 페이지 내 1의 색상만을 바꾸고 싶다면?
-> style="color:red" 과 같은 style 속성을 이용하자.
배운 코드
<html>
<head>
<title>a태그 속성</title>
<style>
a {
color:black;
text-decoration: none; /* 밑줄 없애기 밑줄 치기는 underline 설정 */
}
</style>
</head>
<body>
<a href="1.html" style="color:red" text-decoraion:underline>1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>
</body>
</html>5. 혁명적 변화
CSS 문법 정리
- a : Selector(선택자) 이 웹 페이지에 있는 모든 'a'태그를 선택한다.
- color:red; : Declaration(선언, 효과) 선택자가 지정하는 태그들에 대해서 어떠한 효과를 줄 것인가에 해당된다.
- color : Property(속성)
- red : Property Value(속성 값) Property의 값을 나타낸다.
6. CSS Property(속성)을 스스로 알아내기
이제 무엇을 모르는 지를 알기 때문에 검색하면 된다!
css를 이용해서 텍스트 사이즈를 바꾸고 싶다..!!! 속성을 뭘 쓰면 되는가????
"CSS text size property"로 검색만 하면 된다.
배운 코드
<!doctype html>
<html>
<head>
<title>a태그 속성</title>
<style>
h1 {
font-size:40px; /* 글자 크기 */
text-align: center; /* 가운데 정렬 */
}
</style>
</head>
<body>
<h1>글자</h1>
</body>
</html>7. CSS Selector(선택자)의 기본
가정을 내려보자!
- 모든 링크는 기본적으로 검정색이어야한다.
- 방문한 링크(1, 2)는 회색으로 표시한다.
- 현재 페이지(2)는 파란색으로 표시한다.
<!doctype html>
<html>
<head>
<title>선택자</title>
<style>
#active { /* id는 # */
color:blue;
}
.saw { /* class는 . */
color:gray;
}
a {
color:black; /* 글자 색상 */
}
</style>
</head>
<body>
<a href="1.html" class="saw">1</a>
<a href="2.html" class="saw" id="active">2</a>
</body>
</html>강하다 라는 것..?
왜? 태그 선택자와 클래스 선택자와 ID 선택자가 있으면 ID > class > tag 순서로 적용(강하다!!!!!)될까?
포괄성의 문제로 생각하면된다.
조금 더 구체적인 것이 포괄적인 것보다 우선순위가 높다.
조금 더 포괄적인 것이 구체적인 것보다 우선순위가 낮다.
ID의 값은 한 번만 써야한다. 즉, 유일무이한 값.
하지만 태그는 상대적으로 포괄적이다.
8. 박스 모델
WEB1의 웹 사이트를 이용해서 만든다.
박스 모델 개념 1
위 사진과 같이 구조적인 웹사이트를 만들기 위해서는 "박스 모델"이라는 개념이 필요하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
block level element
*/
h1{
border-width:5px;
border-color:red;
border-style:solid;
}
/*
inline element
*/
a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
</head>
<body>
<h1>제목</h1> flkjslfkjalsdkfjalskjfs(<a href="https:://www.naver.com">naver</a>)dflksjdflskjd
</body>
</html>
- "제목"은 블럭 레벨 element(태그와 동일한 말)
- "naver(링크)"은 인라인 element
이는 display:inline; or display:block;으로 언제든 바꿀 수 있다. 또한 안보이게 하고싶다면 none!
중복 제거하기
<style>
h1, a{
border:5px; solid red;
}
</style>스타일 부분을 이렇게 간결하게 바꿀 수 있다. (5px, solid, red의 순서는 상관없다)
박스 모델 개념 2
-> 기본
-> padding
-> margin
-> margin 20px 적용했을 때
-> width(폭) 적용 (block element는 화면 전체를 쓰기 때문에)
정리해보자면,
1) HTML의 태그들은 태그의 기본적인 성격에 따라서 화면 전체를 쓰기도 하고 자기 크기만큼을 갖기도 한다.
화면 전체를 쓰는 것을 block level element
자기 크기만 갖는 것을 inline element
2) 그 컨텐츠의 크기를 지정하는 것
폭 width
높이 height
콘텐츠와 바깥쪽에 있는 테두리 사이의 간격은 padding
다른 콘텐츠와의 테두리와 콘텐츠 테두리 사이는 margin
9. 박스 모델 써먹기
WEB1에서 진행했던 index.html 파일의 style 태그 부분을 변경 해 주었다.
<style>
body{
margin:1px;
}
a {
color:black;
text-decoration:none;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
</style>
원하는 방향대로 잘 변경 되었다!
이제 아래에 있는 sing street 내용 부분만 위로 올려주면 된다..!!!
10. 그리드 소개
그리드
무색 무취의 태그 두 가지
div 와 span
- div : block level element
- span : inline element
둘 중 필요한 것으로 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr; /* NAVIGATION 과 ARTICLE */
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>1fr -> 나머지 공간 배정
그리드를 사용하면 적용된 공간에 따라 커지고 작아지고 잘 맞춰준다.
can i use???
https://caniuse.com/
여러 CSS나 HTMl 또는 JavaScript의 기술들 중에서 현재 웹 브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 보여주는 서비스
grid는 75% 정도의 사용률을 보여줌. 잘 사용해보자^^^^^^!!!
11. 그리드 써먹기
배웠던 grid를 토대로, 정렬해 줄 ol과 나머지 글자 부분들을 div로 묶고, 이 div에 id grid를 추가해 주었고, CSS에서 display:grid;와 grid-template-columns: 150px 1fr로 설정해주었다.
딱 붙은 모습이 마치 오공 본드를 이용한 것 같네요!! (90년대생 실과시간 필수품 아.시.죠?^^)
검사 이용하기
페이지 우클릭 -> 검사 -> 변경이 필요해보이는 코드 선택하고 computed창에서 해당 박스 값 더블클릭 -> 방향키 위 버튼을 누르면 값이 올라가고, 방향키 아래를 선택하면 내려감
관계를 명확하게 해주자
ol 값을 변경하고 싶지만, 차후에 다른 곳에서 ol태그를 이용한다면..?
div id="grid" 값 내에 ol만을 선택해서 조율한다는 것을 명시하기 위해
#grid ol{
padding-left:25px;
}이런식으로 자세히 명시 해주자!!!
12. 미디어 쿼리 소개
반응형 디자인?
화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것, 이것을 바로 반응형 웹 또는 반응형 디자인이라고 말한다.
개발자도구 클릭 -> 화면을 움직이면 우측 상단에 픽셀이 나타나고, 이를 활용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>
@media(min-width:800px)의 의미는 width가 800이상일 때 적용된다는 의미를 갖는다. (width > 800)
반대로 max-width는 800 이하일 때 적용된다는 의미를 갖는다. (width < 800)
즉, 미디어 쿼리란,,,
여러가지 화면의 특성들에 따라서 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능한 것.
미디어 쿼리는 여러 가지 형태의 화면이 존재하는 세상(태블릿, 스마트폰, 데스크탑....etc)에서 굉장히 중요한 존재라고 할 수 있다.
13. 미디어 쿼리 써먹기
이제 내 웹 페이지에 적용하는 시간을 가져보자..!!! 두근두근~
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}이런식으로 변형을 줄 부분들을 media 내에 입력하여 적용 해 준다.
grid의 부분을 block으로 설정하여 아래로 내려와 공간을 가지게 한 다음, 나머지 선과 같이 분리가 되어보이는 부분들을 제거 해 준다.
결과는 다음과 같다.
14. CSS 코드의 재사용
atom 꿀팁
atom을 사용할 때, 해당 파일 우클릭 후 Split (Right/Left/Up/Down)을 클릭하면 원하는 위치에 분할하여 코드를 같이 볼 수 있다.
극단적인 상황을 생각해보자
??? : 목화씨~ 이거 페이지 수정 부탁드려요 ㅜㅜ 글씨체랑 링크부분 밑줄점 ㅎㅎ
?? : 페이지가 1억개인데요?
??? : ㅎㅎ 부탁 좀 드릴게요!
...
중복을 제거해볼까요?
지금까지 진행했던 CSS 코드를 style.css라는 파일을 새로 만들어 붙여넣기 해준다.
html 코드의 < head > 내부에
<link rel="stylesheet" href="style.css">를 입력해주면 끝.
훨씬 효율적인 코드가 완성되었다!!! 각 페이지의 코드는 한 줄로 줄이고, CSS 파일 한 가지만 변경하면 수억개 수천억 등의 페이지도 한번에 바꿀 수 있는 놀라운 기술을 터득하였다!!!
효과
개발자 도구 - 네트워크 -> 내부적으로 어떤 파일들을 웹서버에서 다운로드 받는지를 보여주는 기능
이것을 확인해보면 CSS 파일을 불러오는 것을 확인할 수 있다.
그렇다면?
하나의 웹 페이지에 대해 여러 개의 파일을 별도로 바깥에 두고 그것을 다운로드 받는 것
vs
그냥 웹 페이지 안에 CSS 코드를 내장하는 것
어떤 것이 더 네트워크 적인 측면에서 효율적(적은 트래픽 사용)일까???
웹 페이지 안에 CSS 코드를 놓는 것이 그것 자체로는 더 효율적이다.
그러나, 캐싱(저장하다)이라는 개념이 등장하면 말은 달라진다. 즉, 우리가 한 번 style.css라는 파일을 다운 받았다면 css파일이 바뀌기 전까지는 style.css란 파일을 이 웹 브라우저는 우리의 컴퓨터에 저장해 놓았다가 그 다음 css가 필요할 때 저장된 css를 가져와 속도를 높일 수 있고(네트워크를 안씀) 돈도 덜 든다는 경제적 효과가 있기 때문이다.
결국 style.css파일을 캐싱할 수 있게 되면 결국에는 훨씬 더 빠르게 웹 페이지를 보여줄 수 있으면서, 네트워크 트래픽을 적게 사용하여 사용료를 훨씬 더 적게 낼 수 있다는 최대의 장점을 가지고 있다.
15. 수업을 마치며
css에서 눈여겨 볼 것은...
선택자와 속성!
이 두 가지를 잘 사용하면 훨씬 더 아름답고 (사용자가 보기도, 사용하기도)편리하게 만들어 줄 수 있다.
마무리하며...
🙂 인상 깊었던 점
예전부터 웹 관련 수업을 들을 때, css 파일을 그냥 생각없이 따로 구성하여 작성하곤 했다. 왜? 그냥 다들 그러니까 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
하지만 왜?라는 의문점을 조금만 파고 들면 귀중한 답이 나올 수 있다는 것을 이번 수업을 통해 깨달았다.
처음엔 css파일을 따로 작성하지 않고, 그냥 한 번에 작성하며 알려주시길래 아 그냥 더 이해하기 쉽게 구성하신 것이라 판단했다. 하지만 14챕터에서 "왜!" css 파일을 따로 쓰면 결과적으로 더 효율적인지에 대해 완벽한 답을 알려주며 파일을 따로 구성하는 장면을 보며, 그동안 그냥 남들이 다들 하길래 라는 나의 안일한 생각에대해 반성하게 되었다. 또한 이후 계속 왜? 이게 더 낫지 않을까? 아니 이게 더 나을 것 같아! 이건 왜 이렇게 구성해야할까?의 방식이 내 기억속에 훨씬 잘 남고 무엇보다... 재밌음!!!
나도 왜??? 라는 의문에 대해 그냥 넘어가지 않고 그에 대한 답을 찾아가는 재밌는 코딩생활을 보낼 예정이다.
🧐 다음 행선지
다음 행선지는.. HTML/CSS/JavaScript 삼대장의 마지막 대장을 만나러 가보려 합니다!
그때까지 모두 건강 조심하세요~ 나도!
Author And Source
이 문제에 관하여([생활코딩] WEB2 - CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ooiher/생활코딩-WEB2-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
