#html 기본 형식
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
#박스 모델 윤곽 배우기
h1 태그는 화면 전체를 쓴다. 줄바꿈을 알아서 해버린다. <제목 태그> - 블럭 전체 쓰는 것이 더 편함
a 태그는 똑같은 태그이지만, 줄바꿈이 되지 않고, 다른 콘텐츠들과 같은 라인에 위치하고 있다. <링크 태그> - 화면 전체를 써서 링크 앞 뒤에 있는 콘텐츠가 줄바꿈이 되면 불편함 고로 no 줄바꿈, 딱 자기의 콘텐트 크기만큼을 쓴다
이 둘의 차이점을 알기 위해 테두리를 넣어보자!
<style></style> 태그 사이에
h1{
border-width:5px; border-color:red; border-style:solid;
}
a{
border-width:5px; border-color:red; border-style: solid;
}
를 집어넣고 사용. border는 테두리이고 width-두께, color-색깔, 스타일-점선, 실선, 단선(solid) 를 추가적으로 넣어준다.
html에 있는 여러 태그들은 그 태그의 성격과 일반적인 쓰임에 따라서 화면 블럭을 쓰는 것이 편한 것과 자기 크기만큼 부피를 갖는 것이 편한 것이 있기 때문에 화면 전체를 쓰는 태그들이 몇 십개가 있고 자기 크기만큼을 갖는 태그들이 몇 십 개가 있다.
#코드 적용안하고 나만의 설명 넣기
HTML의 주석 - <!-->
CSS의 주석 - /* */
태그들을 안보이게 하고 싶다. display:none; 하면 사라진다.
화면 전체를 쓰는 태그들 - block level element
자기 크기만큼을 갖는 태그들 - inline element
하지만 display: inline; 혹은 display: block; 이라고 쓰면 이 둘을 바꿀 수 있다.
즉, h1이라도 자기 크기만큼을 가질 수 있고 a라도 블럭 전체를 가질 수 있다.
중복을 제거 하려면 그냥 CSS에
h1{
border-width:5px; border-color:red; border-style:solid;
}
a{
border-width:5px; border-color:red; border-style: solid;
}
여기서
h1, a{
border-width:5px; border-color:red; border-style:solid;
}
이렇게 바꿔주고 border도 중복이 많으니까
h1,a {
border:5px red solid;
}
이렇게 바꿔주면 중복이 사라진다. 순서는 아무거나 써도 상관없다.
#CSS 박스 모델 만들기
HTML 태그 하나하나를 일종의 박스로 취급해서 그것의 부피감을 결정하는 것 = 디자인의 핵심 요소 결정. 제목에 딱 붙어있는 CSS 이것에 여백의 美를 주고 싶다면?
겨울에 입는 옷 패딩. padding:20px; 를 입력하면 20px만큼 콘텐츠와 테두리 사이에 간격이 생긴다.
장사를 하면 남는 마진. 만약 h1을 하나 더 만들어서 margin:0; 이렇게 입력하면 둘 사이 간격이 없어지고
margin:20px; 를 입력하면 20px만큼 간격이 생긴다.
h1은 화면 전체를 쓴다. 즉, block level element(display:block;)가 생략 되어 있다.
이 화면 전체를 쓰는 특징, 크기를 바꾸고 싶으면
폭을 뜻하는 width:100px; 를 입력하면 된다. 그러면 빨간 테두리의 박스가 100px 만큼 줄여져 있을 것이다.
높이를 뜻하는 height:100px; element가, 태그의 크기가 변경된다는 것이다.
padding, margin, width 등이 헷갈리면
CSS box model 구글링 해라. 잘~ 나온다.
margin은 바깥 쪽, border는 테두리, padding은 안 쪽 여백, content는 말 그대로 써져있는 것.
다하고 난 후, 웹페이지에서 오른쪽 클릭하면 검사라는 기능이 있는데 이것을 보면 코딩이 어떻게 되었는지에 관한 정보가 나온다. Styles는 이 <h1> 태그가 어떤 css스타일의 영향을 받고 있는가를 보여주는 굉장히 중요한 기능이다. HTML과 CSS가 복잡해졌을 때 이런 도구의 도움을 받지 않으면 어떤 하나의 태그가 어떤 css의 영향을 받는지를 찾기가 굉장히 어려워진다. SO, 웹 개발 할 때 엄청난 도움을 준다. 이 개발자도구를 잘 활용해야한다.
#테두리 주기
만약에 밑 줄 하나만 쓰고 싶으면 어떻게 해야할까?
border-bottom: 1px solid gray; 이렇게 하면 밑 쪽에 선 하나가 생긴다
border-right: 1px solid gray; 이렇게 하면 오른쪽에 선 하나가 생긴다.
<ol>태그는 화면 전체를 쓰는 태그이다. 그래서 width로 폭을 줄여주어야 한다.
썼는데 작동을 안하면 ; 같은 거 빼먹었을 확률이 높다.
테두리를 만드는 작업은 개발자 도구와 함께 해야한다. 도구를 보면서 어디 마진 때문에 화면이 비었고 커지고 여백이 생기고 등을 알 수 있다.
margin / padding / width 만 알면 다 한다~~
#그리드 만들기
제목은 아니지만 디자인이라는 목적을 위해서 어떤 의미도 존재하지도 않는 태그를 사용해야하는 경우
division = <div></div> 라는 태그가 있다. 블럭 전체를 쓰는 block level element 태그이다. 줄바꿈이 있다.
<span></span> 이라는 태그도 있다. 자기 만큼의 크기를 쓰는 inline element 이다. 줄바꿈이 없다.
그리드를 알기 위해서는 각각의 태그의 부피감을 알 필요가 있다. <div>에 아무 거나 적고 거기에 대한 부모 태그를 만들어서(<div></div><div></div>) id="아무이름"을 집어넣고 CSS로 사이즈를 키워준다.
어떤 태그가 표시되는 방법을 완전히 바꾸는 display 속성을 쓰면 grid를 사용할 수 있다.
display:grid; 라고 적고 밑에 grid-template-columns: 를 넣는다. 참고로 columns는 가로, row는 세로이다.
이 다음에 들어갈 크기는 순서대로 vaccine article이다. 150px 와 1fr을 넣어주면 vaccine은 150px를 무조건 유지하고 밑에 있던 article이 옆으로 올라가며 1fr(나머지 공간을 다 쓴다).
2fr 1fr 이런식으로 쓰면 2대 1의 비율로 커진다. 즉 화면 전체를 쓰게 자동으로 조정되는 단위가 fr이다.
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>vaccine</div>
<div>article</div>
</div>
</body>
grid의 활용
기술 이름: 떙떙떙 이런 설명을 할 때, 쓰기 좋다. 기술 이름을 150 px로 고정, 설명을 1fr 이런식으로 한다면 기술 이름은 사이즈는 유지한 채로 설명은 깔끔하게 알아서 늘어나기 때문에 굿!
#여러 CSS나 HTML 또는 JavaScript의 기술들 중에서 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 보여주는 서비스를 보려면..
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
#실습1
<style>
#grid ol{
border-right: 1px solid gray;
margin:0;
padding:20px;
padding-left: 33px;
width:90px;
}
#article{
padding-left: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html" >CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<P>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
written in a markup language such as HTML. CSS is a cornerstone technology
of the World Wide Web, alongside HTML and JavaScript.
</P>
</div>
</div>
여기서 <style>안에 있는 <ol>을 #grid 없이 쓰는 것은 좋지 않다. 왜냐하면 나중에 body에서 목록을 표시하기 위해 <ol>이 또 나올 수 있기 때문이다. 확실히 하기 위해서는 id="grid" 인 태그 밑에 있는 <ol>을 명확하게 말해주어야 한다. 그것은 #grid ol 이다. 웹페이지에 있는 모든 ol 중에 분모가 #grid 인 것
#반응형 웹&디자인 만들기 - 미디어 쿼리 (media query)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 10px solid green;
font-size:60px;
}
@media(min-width:400px) {
div{
display: none;
}
}
</style>
</head>
<body>
<div>
responsive
</div>
</body>
</html>
화면 사이즈를 알려면 마우스 오른쪽 클릭 후 도구를 이용하면 된다. 창을 늘였다 줄였다 하면 위에 PX*PX 가 뜬다.
이렇게 짜면 스크린의 크기가 400px 이상 일 때는 화면에서 안보인다.
반대로 max로 짜면 400이하 일 때가 안보이게 된다.
screen width > 400 px (참고)
@media(min-width:400px) = screen > 400px
screen width < 400 px (참고)
@media(max-width:400px) = screen <400px
이렇듯 미디어 쿼리는 다양한 화면의 크기에 반응해서 자신의 모양을 일정 조건 만족시 사라지게 하거나 보이게 할 수 있다.
EX) 스마트폰의 가로, 세로 모드
#실습2
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
이것을 복사하여 미드어 쿼리 하에 두고 디스플레이를 블럭으로 바꾸면
@media (max-width:400px) {
#grid{
display: block;
}
}
블럭 전체를 쓰니까 화면이 400px 이하일 때(screen<400) 자연스레 내려오게 된다.
@media (max-width:400px) {
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
만약에 400 px 이하일 때 ol과 h1의 옆, 밑에 있는 선을 지우고싶다!면 그 코드를 복사해서 미디어 쿼리 밑에 두고 border-xx: none; 으로 해주면 400 이하 일 때는 사라지고 이상 일 때는 다시 생긴다.
#CSS를 이용하여 모든 웹페이지를 한 번에 바꾸는 방법
따로 style.css 라는 파일을 만든 후, <style></style> 사이에 있는 순수 CSS코드만 추출하여 넣는다.
body{
margin:0;
}
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;
margin:0;
padding:20px;
padding-left: 33px;
width:90px;
}
#grid ol{
padding-left: 33px;
}
#grid #article{
padding-left: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
@media (max-width:400px) {
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
웹 브라우저야 이곳에 style.css라는 별도의 파일에 저장된 css를 다운받아서 여기에 원래 그 코드가 있었던 것처럼 동작해! = <link>태그
<link rel="stylesheet' href="style.css:>
고로 웹페이지가 1억개여도 동시에 바뀌는 폭발적 효과를 얻을 수 있다.
코드양이 줄여서 인터넷 사용료도 아낄 수 있다. 중복을 제거해서 재사용성을 높이고, 가독성을 높이고 유지보수를 편리하게 하는 이런 것들이 정말 중요하다.
개발자도구를 통해 network를 보면 내부적으로 어떤 파일들을 웹서버에서 다운로드 받는지를 볼 수 있다.
ex) 1.html을 보고 <link>를 보고 불러온다.
style.css파일을 캐싱(저장) 할 수 있으면
훨씬 더 빠르게 웹 페이지를 볼 수 있으면서 네트워크 트래픽, 사용료를 훨씬 더 적게 낼 수 있다.
코딩을 잘하는 방법 - 중복의 제거 = css를 사용하라!
CSS 에서 가장 중요한 것 (뿌리)
선택자와 속성
속성을 많이 알수록 더욱 풍부한 표현력 얻게 됌
선택자를 많이 알수록 알고 있는 속성을 더 정확하게 표현 가능하다.
자, 이제 진도 보다는 예제를 이용해서 자기 자신에게 의미있는 웹사이트를 꾸며보자.
그 후, 디자인으로나 기술적으로 부족한 부분을 채워나가라 BY 검색 , 질문
이런 것을 통해 내부로 부터 스스로의 깨달음을 얻게될 것이다.
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| <유튜버 - 생활코딩> WEB2 - JavaScript 14~ (0) | 2021.01.19 |
|---|---|
| <유튜버 - 생활코딩> WEB2 - JavaScript (0) | 2021.01.16 |
| <유튜버 - 생활코딩> WEB2 - CSS (0) | 2021.01.12 |
| <유튜버 - 생활코딩> WEB1 - INTERNET 17~32 따라하기 (0) | 2021.01.12 |
| <유튜버 - 생활코딩> WEB1 - HTML 1~16 따라하기 (1) | 2021.01.11 |
