[생활코딩] HTML, CSS 기초 강의 정리
본 글은 유튜브 생활코딩님 페이지의 HTML과 CSS 강의를 듣고, 개인적인 견해와 함께 정리한 글입니다.
https://www.youtube.com/c/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A91
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa
www.youtube.com
HTML
HTML : HyperTest Markup Language 웹 페이지를 만드는 코드
태그로 이루어진 코드로,
# HTML 코드
아우 <u><strong>배고파</strong></u>위처럼 코드를 작성하면 웹브라우저가 번역해서 웹 페이지에 나타낸다.
웹의 시작이자 기초 코드.
태그 : HTML의 기본 문법
* 구조
<tag name> [ </tag name> ] 닫는 태그는 없기도 함
<head> : 본문을 설명하는 부분(<body>를 설명하는 부분)을 나타내는 태그
<body> : 본문에 쓰이는 부분을 나타내는 태그
즉, html에서 쓰이는 모든 태그는 <head>나 <body> 둘 중 하나에 쓰임
그리고 이를 감싸는 마지막 <html> 태그가 있고, 그 위에는 <!doctype html>을 써주어, 해당 코드는 <html>임을 명시
<!doctype html>
<head>
<body>
</body>
</head>
* 기능
태그의 기능을 적용시켜서 웹 페이지에 출력. 안에 있는 내용에 적용되는 기능도 있음.
* 태그의 영역
(1) block level element : 화면 전체를 쓰는 태그. 자동 줄바꿈 적용
각 태그는 태그의 성질/기능에 따라 default로 부여된 차지하는 영역(부피)가 다르다. 예로, h1 태그는 줄바꿈이 자동 적용되며, h1 태그가 갖는 영역은 화면의 가로영역 전체임.
(2) inline level element : 자신의 크기만큼 부피를 갖는 태그. a태그는 자기 영역만큼 가짐.
- 이들은 css를 이용해(속성도 가능한가?) 조절 가능하다.
예시)
<style>
h1{
border-width: 5px;
border-color: red;
border-style: solid;
display: inline;
display: block;
display: none;
}아니 저 display: none 있으면 데이터 추출 귀찮았는데
* 태그의 부모/자식 성질
부모태그 : 다른 태그를 포함하는 태그
자식태그 : 다른 태그에 포함된 태그
자식태그가 또 다른 자식태그 가질 수 있고, 여러 자식 태그 가질 수도 있는 구조임
이러한 부모자식 관계는 상황에 따라 바뀔 수 있다. 그런데, 항상 부모/자식 관계가 동일한 태그들이 있는데, 그 예가 <ul> or <ol> / <li> 태그
* 종류 : 약 150개 이상의 태그가 존재함.
<h1> : 제목을 나타내는 태그로, h1 ~ h6까지 있다. 숫자가 커질 수록 글자는 작아진다. 자동 줄바꿈 기능이 있다.
<p> : 단락을 나타내는 태그. 내용의 어디까지가 단락인지 알아야 하기에 닫는 태그가 있음. paragraph
<img src="이미지의 주소" width="n%"> : src 속성은 경로에 있는 주소값을 이미지로 나타내줌. width=n% 이미지 크기를 웹 크기에 맞게 항상 n% 유지. 픽셀값이 들어가도 됨
<li> : 목차 나타내는 태그. list
<ul> : 감싼 list를 한 paragraph로 묶어준다. 비슷한 목차들끼리 묶을때 쓰는 듯. unordered list
<ol> : ul과 같은 기능이지만, 목차에 자동으로 numbering 해줌. ordered list
!중요 태그들!
<title> : 웹페이지의 제목을 나타냄. 검색엔진이 이것을 기반으로 검색할 수도 있음.
<meta> :
<meta charset="utf-8">처럼, html에 적용할 설정값을 지정해줌.
* meta는 다른 데이터에 대한 정보를 제공하는 특정 데이터 집합. 다른 언어에서도 meta라는 약속어가 많이 쓰였던 것 같다.
<a> : anchor의 줄임말로 링크를 표현하는 기능. 아주 중요한 태그
<p><a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html 공식문서 링크"> HTML</a></p>- target 은 새탭으로 여는 속성, title은 무슨 링크인지 설명해주는 메모 title 속성
속성(attribute) : HTML 태그만으로는 나타낼 정보가 부족할 때, 속성을 통해서 기능에 옵션을 추가해줌
* 구조
<tag name "attribute name"="value" "attribute name2"="value">
속성의 위치는 상관이 없음
* 기능
HTML과 함께 쓰여서 기능을 완성하거나 조절해줌.
문법, 기능에 맞는 HTML 작성이 중요한 이유
1. 검색
웹은 검색엔진에 검색이 되어, 정보를 제공할 수 있어야 한다.
이러한 검색엔진은 기본적으로 태그를 기반으로 검색을 진행한다.
그렇기에, <title> 태그를 사용해서 웹 제목이나 주제를
검색엔진이 이해하기 쉽게 작성하여야 한다. (예로 검색엔진은 <title>을 책 표지로 이해함)
(검색엔진의 작동방식은 계속 변경될 수 있으니, 트랜드에 맞는 태그를 사용하여야 할 듯.)
2. 접근성
단순히 꾸미는 것보다, 사용자 측면에서 이해하기 쉽게 적절한 태그를 사용하여야 한다.
<a> 태그의 중요성
웹페이지 홈에 아래의 목차가 있다.
각 링크를 눌렀을때, 다음 페이지로 이동시킬때 이 <a> 태그가 사용된다.
이를 코드로 나타내면,
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="html.html">1. HTML</a></li>
<li><a href="css.html">2. CSS</a></li>
<li><a href="js.html">3. JavaScript</a></li>
</ol>위와 같을 것이다.
이렇게 각 분기별로 웹 페이지의 내용을 구성하고, <a> 태그로 각각의 웹 페이지를 연결시켜주는 것이 html의 기본이자 중요한 구조인 것이다.
ex) home 페이지 -> 회원가입 페이지 -> 로그인 페이지 -> home 페이지 -> 원하는 서비스 제공 페이지(게시판, 쇼핑몰) 등
강의자료 출처 : 유튜브 생활코딩
https://www.youtube.com/c/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A91/featured
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa
www.youtube.com
CSS
CSS : 웹 디자인, 구조 등을 꾸미기 위한 용도로 사용되는 언어
예전에는 HTML 디자인을 위한 태그를 연구하고 써왔음. 예로, <font> 태그.
<h1><font color="">폰트 태그로 색 지정</font></h1>그러나, 이러한 방식으로 웹을 디자인 하기에는 한계가 생겼음.
1. 정보가 들어가는 <h1> 태그에 <font> 태그가 섞이면서, 검색엔진에 노출될 가능성이 줄어들 수 있고, 그렇게 됨으로 인해 검색되어야 할 정보의 가치가 떨어질 수 있음.
2. 추가로, <h1> 태그를 늘릴 때마다 <font> 태그를 추가해주어야 하고, 색을 바꿀 때마다 일일히 수정해야 하는 비효율적이고 지속적인 반복작업이 됨.
그래서 생긴 언어가 css
유지보수, 생산성을 향상시키기 위해 등장한 언어인듯 하며, 실제로 그 목적에 맞게 사용되고 있고 효과도 엄청난 것 같다
사용방법 : <style> 태그와 속성
브라우저에게 해당 코드는 html이 아닌, css 문법이라고 알려줘야 함.
1. <style> 태그
<style>
a {
color:brown;
text-decoration: none;
}
</style><style> 안의 태그는 css 언어임을 브라우저에게 html로 알려주고,
그 안의 내용은 css로 구성된다. 위 코드 내용은 모든 a 코드의 색을 brown으로 일치시키는 것.
text-decoration은 밑줄 같은 글꾸밈을 의미
a는 selector(선택자)라고 하며, 효과를 적용할 태그를 나타냄. (모든 a에 기능 적용)
(와 크롤링에서 썼던 css selector가 이거였구나)
그 안의 color:brown 부분은declaration(효과, 선언)이라고 하며, ;(세미콜론)으로 구분됨.
(근데 <head> 안에 존재해야 하는 건가?)
2. 속성
style 속성은 웹 브라우저는 css 문법에 따라서 해석하고 style 속성이 위치하고 있는 태그 안에 적용함.
이때, 어떤 속성으로 사용된 태그에 style을 적용하는 것이기에, 선택자가 필요 없음.
<a href="html.html" style="color:red">1. HTML</a>
선택자 심화
<li><a href="html.html">1. HTML</a></li>
<li><a href="css.html">2. CSS</a></li>
<li><a href="js.html">3. JavaScript</a></li>* 상황 :위와 같이 3개의 <a> 태그가 있다. 그 중, 1.HTML과 2.CSS 태그만 글자색을 조정하고 싶다. 이를 하나씩 style 속성을 적용한다면, 추후 또 많은 반복작업과 심각한 업무량에 시달릴 수 있다.
이를 해결하기 위한 방법은 몇 가지가 있다.
[1] class 사용 : .class명
(1) 해당 태그에 class속성을 부여한다.
<li><a href="html.html" class="a">1. HTML</a></li>
<li><a href="css.html" class="a">2. CSS</a></li>
<li><a href="js.html">3. JavaScript</a></li>
(2) class 명을 이용해서 css를 적용한다.
<style>
a {
color:brown;
text-decoration: none;
}
.a {
color: gray;
}이때, . 을 붙이는 것으로 브라우저에 해당 이름은 태그가 아닌, class 명이라고 알려줄 수 있다.
또한, 클래스에는 여러개의 값이 올 수 있고(띄어쓰기로 구분)
<style>
a {
color:brown;
text-decoration: none;
}
.b{
color: blue;
}
.a {
color: gray;
}
</style>
<li><a href="css.html" class="a b">2. CSS</a></li>위와 같이 적용 가능하다.
적용은 클래스 순서에 따라 우선순위를 갖는다. 더 아래에 있는 클래스의 속성이 적용된다.
(근데 이는 클래스 사이에서만인듯. 예를 들어, 클래스를 품고 있는 <a>의 위치를 아래로 내리더라도 클래스의 속성이 적용됨. 즉 클래스 선택자가 태그 선택자보다 우선시 됨)
근데 이는 좋은 방법이 아니라심
[1] id 사용 : #아이디명
<style>
a {
color:brown;
text-decoration: none;
}
#c {
color:red;
}
.a {
color: gray;
}
.b{
color: blue;
</style>
<li><a href="css.html" class="a b" id="c">2. CSS</a></li>
id 선택자는 #으로 나타냄. id 선택자는 class 선택자보다 우선시 된다.
id > class > 태그 선택자 순으로 우선시 되며, 그 안에서는 더 아래에 있는 선택자가 우선시됨.
그리고 id은 html에서 단 한번만 등장해야 됨. id의 핵심은 중복이 되면 안되기에, 중요한 약속
그렇기에, css를 적용할 때 id 선택자를 좀더 우선시 하기로 함.
공통적인 값에 공통 디자인 적용하고, 유일무이한 값에 개별로 디자인 적용하는 것이 효율적이니까
선택자 심화2
1. 같은 디자인 적용하는 선택자라면, 이렇게 묶어줄 수도 있음.
<style>
h1, a{
border-width: 5px;
border-color: red;
border-style: solid;
display: block;
display: none;
}
</style>
2. 위의 같은 border 디자인 값이라면, 아래와 같이 한줄로 줄일 수 있음. 값의 순서는 중요치 않음
<style>
h1, a{
border: 5px solid red;
display: block;
display: none;
}
</style>
* 중요
3. 부모태그가 있는 자식 태그 선택자 적용하는 방법
ol li{
color: red
}
CSS 박스모델
HTML 태그에 부피감을 주는 개념. 디자인에 중요한 요소
<style>
h1, a{
border: 5px solid red;
padding: 20px;
margin:5;
display: block;
}
</style>
<h1>으아아아아</h1>
<a href='index.html'>모슨</a>
저 빨간 테두리 안쪽이 padding, 두개의 빨간선 사이의 공간이 margin임
이렇게 박스모델을 봐가면서 design 해야 함.
박스 경계선에 선 긋고, 박스가 너무 크거나 좁으면 조절하고 하는 방식으로
그리드
<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>APPLE</div>
<div>BANANA</div>
</div>
</body>
1. grid 디자인을 적용시키기 위해 apple과 banana를 아무 기능 없는 <div>로 우선 감싼 것이다.
2. display: grid로 해당 id 속성을 grid로 변경해준 뒤,
grid-template-columns: 150px 1fr;을 적용한다. 원래 한 줄의 row 정렬되어있던 데이터가 column 정렬로 변경되며, 차지하는 영역의 크기는 각각 150px, 1fr(남은 공간 전체)이다.
만약, 1fr 1fr이면, 영역을 2등분해서 화면의 크기에 맞게 영역이 변경된다.
반응형 웹 / 반응형 디자인
화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 되는 웹.
CSS를 통해서 구현하기 위해서는 핵심적인 개념인 미디어 쿼리(Media Query)가 있다.
1. Media Query로 화면크기에 따른 display 노출 조절하기.
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(min-width:800px){
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>화면이 800px보다 크면 div 태그가 안보이게 설정.
( 근데 max-width 800일때 안보이게 하는게 더 직관적인거 아닌가? 어쨌든 이렇게 약속됐으니..)
어쨌든, 어떠한 조건을 만족할 때 css 내용이 동작하게 하는 것이 가능하고, 이를 가능하게 해주는 것이 Media Query이며, 이를 이용해 반응형 웹을 디자인할 수 있다.
CSS 코드의 재사용
동일한 style의 css 코드가 여러개의 html 페이지에 적용되면, 이를 분리하여 재사용에 용이하도록 할 수 있다.
style 코드들을 따로 style파일명.css 로 분리 모아두고, 아래의 링크 태그로 상속받게 할 수 있다.
<link rel="stylesheet" href="style.css">이 css 파일도 캐싱에 저장되는 요소 중 하나래. 오... 그럼 네트워크도 덜 쓰고 시간도 빠르고 훨씬 효율적
강의 출처
https://www.youtube.com/c/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A91
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa
www.youtube.com
그동안 html 코드를 수없이 봤지만, 기초 공부를 안 해서 감으로만 이해했었는데 이번 강의로 기초를 잡을 수 있게 된 거 같다.
계속 공부해야지..