🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [22]일차
🚀22일차에는 HTML의 기초와 태그들, 본격적으로 CSS를 배웠다.
학부때 배웠던 내용을 더 자세히, 다양한 실습으로 배운 느낌이라 얻은게 많은 22일차였다.
회고를 통해 CSS의 다양한 실습을 진행해보았다.
XML
<body> 태그들 ... </body>- <>로 시작해서 <>로 끝나는 형태를 XML(확장가능한 마크업언어)
- XML을 이용해서 HTML을 만든 것
- 각각의 문서는 스키마(schema)를 가지고 있다.
- XML은 데이터를 전송할때 표준적으로 어떻게 보내야할지를 도와주는 역할을 한다.
<사람>
<이름> </이름>
</사람>- 이렇게 태그별로 전송하게되면 단순히 데이터를 전송할때보다 명확한 역할을 가지게 될 것이다.
- 👀공공데이터를 XML로 제공하기도 하지만 점점 json 타입으로 제공하는 방식이 많아지고있다.
{이름 : 홍길동, 나이 : 20 …}- json의 데이터 구조
스키마 (Schema)
- 특정 언어를 정의할때 필요한 요소와 속성을 담아놓은 “정보들의 집합”을 의미
- 스키마는 일관성 있는 XML 문서를 유지하는데 도움을 줌
DTD (Document Type Definition)
- '문서 타입 정의'를 의미하며, XML 문서의 구조 및 해당 문서에서 사용할 수 있는 요소와 속성을 정의한다.
- DTD는 XML 문서 내부에 명시할 수도 있으며, 별도의 파일로 분리할 수도 있다.
❓DTD의 사용 목적
➡️DTD를 사용하여 새로운 XML 문서의 구조를 정의함으로써 새 문서 타입을 만들 수 있다.
이를 이용해 데이터의 교환에서 표준으로써 활용 가능
DTD 문법
- XML에서 DTD를 작성하는 문법
<!DOCTYPE 루트요소 DTD식별자 [ 선언1 선언2 ... ]>- DTD는 <!DOCTYPE 로 시작
- 루트(root) 요소 : 루트 요소부터 파싱(parsing)을 시작하라고 알려주는 역할
- DTD식별자 : 프로그램 외부의 DTD 파일을 위한 식별자
HTML5
- 단지 웹페이지의 내용을 보여준다. 디자인적으로 꾸며주는 역할은 CSS가 담당한다.
- 기본 구조로 <!DOCTYPE html> 가 있어야한다.
- <!DOCTYPE html>와 같은 DTD가 들어오는 형태는 ➡️HTML5을 나타내는 “스키마”이다.
속성
<a href="http://www.naver.com">naver</a>- href : 속성이름
- url : 속성값 (http://www.naver.com)
- href = “url” : 속성블록
<h1>Hello</h1>
<!-- 주석 -->
- 시작태그<h1>와 끝태그</h1>
- Hello : 내용
- (시작태그 + 내용 + 끝태그) : 이 모두를 합쳐서 "요소 (element)"라고 함
- <!-- 주석 --> : 이 문법으로 주석 처리 가능
HTTP
- HyperText Transfer Protocol의 약자
- 네트워크에 연결된 모든 컴퓨터들은 주소를 가짐
그 주소는 “IP”라고 함 ➡️Internet Protocol의 약자로, 인터넷 프로토콜 주소를 의미 - HTTP는 W3(=www, World Wide Web) 상에서 정보를 주고받을 수 있는 프로토콜로,
네트워크 통신을 작동하게 하는 기본 기술 - 서버와 클라이언트 사이에서 메시지를 교환하는 규칙을 정의하며 요청(Request)과 응답(Response)으로 구성
➡️일반적으로 80번 포트를 사용 - 한번 접속하면 “접속을 유지하지 않는다"
➡️클라이언트의 URL접속 요청에 대해서만 서버가 응답한 후 클라이언트에 보내고 접속을 끊음
ex. Test.html 작성 후 브라우저에서 페이지를 띄웠을때 이후 코드 내용을 수정해도
브라우저의 Test.html페이지는 변경되지 않고 저장 후 재요청해야만 바뀐 내용에 대해 응답을 한다. - 이런 이유로 HTTP는 Stateless의 프로토콜 중의 하나 (=접속상태를 유지하지 않음)
- ex. cmd → ipconfig (Internet Protocol Configuration)
➡️컴퓨터의 IP 주소를 알아낼 수 있음
➡️컴퓨터의 TCP/IP 네트워크 설정값을 표시하는 데 사용 - 각각의 웹페이지마다 들어갈 수 있는 URL을 “도메인”이라고함
도메인(Domain) : 사람들이 기억하기 쉽게 만들어진 영문, 한글 등 문자로 만든 인터넷 주소
HTML 문법/구조
<!DOCTYPE html>
<!-- 루트태그 -->
<html lang="en">
<head>
<!-- 브라우저에게 전달할 내용 -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 보여주고자 하는 내용 -->
</body>
</html>- <html> : 루트태그
- <head> : 브라우저에게 전달할 내용, 화면에 보이지 않음, <meta>, <title>, <style>태그들 연결 가능
- <body> : 보여주고자 하는 내용
- (<html> + … 다양한 태그들 … + </html>) : 이들을 모두 합쳐서 "element = 요소"라고 함
- <html lang=”en”> : html태그의 “속성(lang="en")”
- <meta 속성 /> : 시작태그와 종료태그를 함께 쓰고 있는 형태로 “속성”만 있고, “콘텐츠”가 없다.
- <meta name=”” content=”” /> : 태그 안에는 name, content.. 등 처럼 “여러 개의 속성”이 들어올 수 있다.
meta
- 가장 먼저 선언 되며 문자 세트(=문서의 문자 인코딩, ex. charset=”UTF-8”) 를 비롯한 문서 정보를 담음
- 뷰포트 설정 : 반응형 웹 디자인에 필수적인 속성 ➡️ 모바일 브라우저에서 어떻게 보여질지 제어
<meta name="keywords" content="HTML, CSS, JavaScript"> <!-- 키워드 -->
<meta name="description" content="페이지 설명"> <!-- 웹페이지 설명 -->
<meta name="author" content="웹페이지 작성자"> <!-- 저자 제공 -->
<meta http-equiv="refresh" content="30;url=https://example.com">- 키워드 : 페이지 내용과 관련된 키워드를 제공, 검색엔진 최적화(SEO)에 도움
- http-equiv : 리프레시 옵션으로 페이지를 자동새로고침하거나, 특정 시간 후 다른 페이지로 리다이렉션
- 그 외로 캐시 제어, 오픈 그래프 메타태그 (SNS에서 페이지 공유 시 어떻게 보여질지 썸네일 등 제어) 가 가능
HTML 다양한 태그
- <br> : line break, 텍스트를 강제로 줄바꿈
- <h1~h6> : heading, 요소들의 제목을 의미, 검색 엔진은 <h1~h6>같은 태그를 중요하게 판단(가중치가 높다)
이때 heading태그를 중요한 태그로 판단하기때문에 문서의 중요한 내용을 넣어준다.
➡️검색엔진에 노출될때의 경우를 대비 (ex.h3(소제목)보다는 h1(대제목)이 높은 가중치) - <hr> : 가로 줄을 그어줌
- <div> : 콘텐츠를 그룹화, 디자인적 기능도 하지만 자바스크립트로 특정 블록을 제어하는데 사용
block형식으로 공간을 분할하는 기능 - <span> : inline 형식으로 공간을 분할
<div>
<span>span 태그1</span>
<span>span 태그2</span>
<span>span 태그3</span>
</div>
- <span>태그로 그 줄의 공간을 분리 ➡️띄어쓰기를 하지 않아도 span태그 사이 약간의 공간을 둠
- <ul> : 순서가 없는 목록, 요소들의 리스트를 담음, 각 리스트는 <li> 태그로 선언
- <ol> : 순서가 있는 목록, 요소들의 리스트를 담음, 각 리스트는 <li> 태그로 선언
<table>
- 표를 그릴 수 있는 태그
<table border="1">
<thead>
<tr>
<th>순위</th>
<th>나라</th>
</tr>
</thead>
<tbody>
<tr>
<td>1위</td>
<td>독일</td>
</tr>
<!-- 나머지 tr, td... -->
</tbody>
</table>- <tr> : 표 내부의 행을 의미, 가로 줄을 의미
- <td> : 표 내부의 열을 의미, 세로 줄을 의미
- <th> : 셀의 제목 태그
- <border> : 표의 테두리 두께이지만 CSS 사용을 권장
- <rowspan> : 세로로 셀을 합침
- <colspan> : 가로로 셀을 합침
- HTML5태그는 일반적인 <body> <head>가 아닌 table의 body를 의미하는 <tbody>와
table의 head를 의미하는 <thead>로 태그의 이름을 직관적으로 명시함. - 이렇게 직관적으로 명시한 태그를 "시맨틱 태그 (Semantic Tag)"라고 함.
시맨틱 태그는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그이다. (의미, 정보, 영역을 가진 태그)
시맨틱 태그의 주 요소로 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재
<img>
- 이미지를 나타낼 수 있는 태그
<img src="chrome-image.png" alt="크롬로고">- src : 이미지 경로
- alt : 이미지 설명
- width : 이미지 너비 / height : 이미지 높이
<form>
- 입력양식 태그로 서버에게 정보를 전달할 수 있는 태그
- action 옵션이 주로 많이 쓰임
<form>
<p><label>아이디</label><input type="text"></p>
<p><label>비밀번호</label><input type="password"></p>
<p><input type="submit" value="로그인"></p>
</form>
- action : 정보를 가지고 이동할 페이지를 정의함
- <label> : <form>태그 안에서의 텍스트를 의미
- <input type=”text”> : input 박스를 정의하고, 타입은 text로 설정. 입력하는 글자가 표시
- <input type=”submit”> : input 박스이지만, submit이라는 속성값은 제출버튼을 표시하며,
이 버튼의 레이블(텍스트)은 value 속성으로 지정 가능 - <input type=”password”> : input 박스를 정의하고, 타입은 password로 설정. 입력하는 글자가 표시되지 않음
HTML 앵커 (Anchor) 기능
<a href="주소"> 내용 </a>
- 하이퍼링크 태그를 의미
- 내용부분을 클릭하면 주소로 접속가능
시맨틱 태그 Semantic Tag
- <body> …시맨틱 구조들… </body> 안에 시맨틱 구조 태그들이 위치한다.
- <header> : 헤더, 로고나 제목의 페이지 상단 표시
- <main> : 페이지의 주 콘텐츠를 표시
- <nav> : 네비게이션, 웹사이트의 메뉴, 탭 등
- <aside> : 사이드에 위치하는 공간, 페이지 콘텐츠를 제외한 콘텐츠 정의, 주로 사이드바 (게시판 목록 등)
- <section> : 여러 중심 내용을 감싸는 공간, 페이지를 여러 주제나 하위 목록으로 형성
section안에 section을 넣을 수도 있음, 주로 <main>태그 안에 위치 - <article> : 내용, 독립적인 글을 다룸, 블로그 게시물, 상품 리뷰 등
- <footer> : 꼬리말 부분에 표시되는 내용, 저작권, 연락처, SNS 계정링크 등
- <address> : 표시할 주소를 작성
- ⚠️시맨틱 구조 사용시에는 스타일 지정, 자바스크립트 목적을 제외하고는 <div>같은 요소나, 속성은 지양해야함
- 💡시맨틱 태그를 사용하면 검색엔진과 사용자에게 웹페이지가 더 잘 보이게 만들 수 있다.
(검색엔진최적화 (SEO) 향상)
❓HTML + CSS + 자바스크립트의 동작
➡️HTML은 정보만 보여주고, CSS는 스타일을 입혀 꾸며줌, 자바스크립트는 동적으로 페이지를 기능하게 해줌
CSS
- Cascading Style Sheets의 약자
- HTML 요소를 사용자가 정의한 다양한 스타일로 디자인할 수 있는 언어 (HTML 내용을 디자인적으로 꾸밈)
- <head>태그 안에 위치하며 CSS 작성은 <style> </style> 태그 안에서 정의한다.
/* CSS의 주석처리 방법 */
❓CSS와 자바스크립트의 차이점/목적
➡️CSS는 <html>태그가 반드시 있어야함
CSS는 <html> → <head> → <style>태그 안에 CSS가 존재하기때문에 결국 HTML을 꾸며주기 위한 목적이다.
반면 자바스크립트는 단독적으로 존재할 수 있다.
Selector 선택자
- HTML을 꾸며줄때 선택자를 통해 꾸며주게 된다.
- 문서 안 HTML의 요소를 찾아내는 역할
selector {
property: value;
property: value;
}
- 일반적으로 이러한 구조를 가지며, property (속성) 에 어떤 value (속성 값)을 가질지 정의
- 태그 선택자 : HTML에서 <h1>태그를 썼으면 h1선택자를 사용할 수 있다.
*{
/* 전체 선택자 */
}
h1{
/* h1태그의 선택자 */
color:red;
}- * : 전체 선택자를 의미한다. (⚠️권장하진 않음)
<style type="text/css">
.class-selector{
font-size:100px;
}
</style>
<body>
<h1 class="class-selector"> 클래스 선택자 </h1>
<h3 class="class-selector"> 클래스 선택자2 </h3>
</body>
- 클래스 선택자 : HTML에서 특정 태그 안에 정의된 class=" "를 지정하여 CSS를 적용 (.(온점)을 사용)
하나의 클래스를 여러개의 태그에서도 사용할 수 있다.
<style type="text/css">
#type-selector{
background-color:white;
}
</style>
<body>
<h1 id="type-selector"> 타입 선택자 </h1>
</body>
- 타입 선택자 : HTML에서 특정 태그 안에 정의된 id=" "를 지정하여 CSS를 적용 (#을 사용)
클래스 선택자와 달리 하나의 태그에서만 적용할 수 있다.
❓클래스 선택자와 타입 선택자를 함께 가질 경우
<p class="class-selector" id="type-selector"> 선택자 우선순위 </p>
➡️타입 선택자가 가장 높은 우선순위를 가지며
<style> 태그 안에서 #type-selector { 꾸며줄 값 } 옵션을 지정한 값이 적용됨
마진 margin 과 패딩 padding
- 마진(margin) : 요소의 외부 여백을 조절하는 속성, 요소 주변에 여백을 만들어 다른 요소 와의 간격을 둠
- 패딩(padding) : 요소의 내부 여백을 조절하는 속성으로, 그 요소의 콘텐츠 주변에 일정한 크기의 테두리를 추가
▶️실습 - 마진, 패딩 알아보기
<style>
#box1 {
background-color: RED;
}
#box2 {
background-color: GREEN;
}
#inner-outer {
background-color: yellow;
}
#entire-outer {
background-color: skyblue;
}
</style><div id="entire-outer">
<p id="inner-outer">바깥[TOP] div</p>
<div>
<p id="box1">margin 태그, padding 태그 Tester</p>
</div>
<div>
<p id="box2">margin 태그, padding 태그 Tester</p>
</div>
<p id="inner-outer">바깥[BOTTOM] div</p>
</div>
- 전체 div (entire-outer) 선택 시 이 박스 안에 담긴 모든 요소들이
CSS로 적용한 #entire-outer의 하늘색 배경 안에 모두 담김
- 각자의 내부 박스 div (inner-outer)를 가지며 색은 모두 다르게 지정 후 실습
🚀실습 - padding 옵션 1
#box1 {
background-color: RED;
padding: 10px 10px;
}
- padding : 10px 10px;
➡️내부 박스 (box1)에 패딩 옵션을 주었다. [내부 박스] 와 [텍스트] 간의 간격이 padding옵션으로 조절
(상하 10px, 좌우 10px을 지정) - margin, padding의 방향 옵션 (위 → 오른쪽 → 아래 → 왼쪽)순
ex. padding : 5px 10px 15px 20px; ➡️위 5px, 오른쪽 10px, 아래 15px, 왼쪽 20px 로 간격을 둠
(⭐위쪽을 기준으로 시계방향으로 옵션 지정)
🚀실습 - padding 옵션 2
#box2 {
background-color: GREEN;
padding: 30px 5px 30px 5px;
}
- padding : 30px 5px 30px 5px;
옵션이 “위쪽”을 기준으로 시계방향이므로 (위 30px, 오른쪽 5px, 아래 30px, 왼쪽 5px)로 padding 간격 적용
🚀실습 - margin 옵션 1
#box2 {
background-color: GREEN;
padding: 30px 5px 30px 5px;
margin: 30px 30px;
}
- margin : 30px 30px;
본인 박스(box1)의 간격이 아니라 외부 박스(inner-outer)와의 간격을 조정 - padding은 본인 박스(box1)와 내부 콘텐츠(텍스트)의 간격을 둔다면
margin은 본인 박스(box1)와 외부 박스(inner-outer)와의 간격을 둔다.
- F12 개발자 도구를 활용하여 초록색 박스가 어떻게 간격을 두는지 직관적으로 확인
🚀실습 - margin 옵션 2
#inner-outer {
background-color: yellow;
margin-bottom: 50px;
}
- margin-bottom : 50px;
노란색 영역 박스 div (inner-outer)의 밑 간격을 50px로 지정
즉 본인 박스(inner-outer)로부터 외부 박스(box1)까지의 밑 간격을 50px로 지정 - 빨간색 영역 박스(box1)와 노란색 영역 박스(inner-outer)가 50px 간격을 두게됨
폰트적용
<style type="text/css">
.class-selector {
font-family:"맑은 고딕", "돋움";
font-weight:bold;
font-size:34px;
}
</style>
- font-family : 적용할 폰트의 이름을 적용, “맑은 고딕”, “돋움” 처럼 여러개를 지정하는 이유는
➡️사용자 컴퓨터에 폰트가 없을 수 있기때문에 대체옵션을 미리 지정 - font-weight : 폰트 스타일을 지정, bold : “굵게”, Italic : “기울게” 등
- text-decoration : underline; ➡️밑줄 속성을 지정한다.
- text-align : center ➡️중앙 정렬을 한다.
- text-indent : 0; ➡️들여쓰기를 지정할 수 있다.
- letter-spacing : 5px; ➡️글자들 간의 간격을 5px로 지정
- word-spacing : 30px; ➡️단어들 간의 간격을 30px로 지정
- font-size : 글자 크기를 의미
display 옵션
- display : block;
기본설정은 block. 한 줄 전체를 차지하는 박스를 의미하고, 이 옵션을 통해 이 박스의 우측에는 위치하지 못하게됨. - display : inline;
box2와 box3은 display가 inline으로 지정되어있어서 block과 반대로 한 줄 전체를 “block”처리하지 않음을 의미
➡️같은 줄에 위치하도록 함 - display : inline-block;
display : inline과 동일한 기능을 가진다.
❓display:inline 과 display:inline-block 의 차이점
➡️inline옵션은 width와 height를 지정하지 못하고 콘텐츠 영역만큼의 크기만 가질 수 있으나
inline-block옵션은 width와 height를 명시적으로 지정할 수 있어 콘텐츠 외로도 명시적으로 박스 크기를 지정 가능
콘텐츠 표시 옵션
1. visibility
- visibility:hidden; ➡️ 해당 옵션을 가지는 태그는 감춰짐
❓display:none과 visibility:hidden의 차이점
➡️display:none 은 브라우저에서 어떠한 영역도 차지하지 않는것처럼 설정
visibility:hidden 은 브라우저에서 보이지만 않을 뿐 요소가 존재하는 영역은 확실하게 가짐
💡자바스크립트와 결합하여 이 옵션을 On/Off 하는 기능을 구현할 수도 있을 것이다.
비슷하게 disabled : true 옵션도 있는데 이 경우에도 display:none과는 다르게 공간은 가지고 있다.
2. opacity
- 투명도를 설정
- opacity : 1; ➡️100% 다 보임
opacity : 0; ➡️ 0%로 안보임
opacity : 0.1; ➡️ 10%정도로 보임
<style type="text/css">
.box2 {
/* ... */
margin-top: -80px;
opacity: 0.5;
}
</style>
- margin-top : -80px;
외부 박스와의 위쪽 간격을 -80px처럼 음수로 주게되면 다른 외부 박스에 80px만큼 겹쳐짐
배경 이미지 / 외곽선 옵션
- background-image: url(chrome-image.png);
➡️url로 지정할 수 있고 chrome-image.png를 반복으로 보여줌 - background-repeat : no-repeat;
➡️이 옵션으로 반복으로 보여주던 이미지를 하나만 보여주도록 설정 가능
➡️no-repeat 대신 repeat-x, repeat-y 처럼 x, y축으로 반복하는 옵션도 가능 - border: 1px solid black;
➡️박스의 테두리를 1px, 실선, 검은색 으로 적용
➡️border-color, border-style, border-width 로 따로 적용도 가능 - border-style : 옵션
solid : 실선
dotted : 짧은 점선
dashed : 긴 점선
double : 두줄 실선
outset : 안쪽 어둡게
inset : 바깥쪽 어둡게
groove : 파인 선
ridge : 볼록한 선
🚀실습 - 소개 페이지 만들기 (축구선수 데이터 활용)
🚀실습 - 간단한 블로그 포스트 페이지 (회고)
🚀실습 - 제품 소개 페이지 (Bose 헤드폰)
💡CSS를 본격적으로 배워보며 혼자 토이프로젝트를 진행할때는 알지 못했던 세세한 부분을 알게되어 좋았다.
무작정 만들고 싶은 느낌의 화면을 구현하기 위해 하나의 태그를 사용할때마다 검색해서 사용했다면
오늘 회고를 통해 먼저 구조를 정의하고 그 구조에 알맞는 태그를 선언하고 CSS를 통해 스타일을 적용하는 것을 기억할 수 있게 되었다.🚀
'Recording > 멋쟁이사자처럼 BE 13기' 카테고리의 다른 글
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_24일차_"자바스크립트" (0) | 2025.01.06 |
|---|---|
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_23일차_"CSS 선택자와 위치 속성" (0) | 2025.01.03 |
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_21일차_''프론트엔드 시작" (2) | 2024.12.31 |
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_20일차_''디자인패턴" (2) | 2024.12.30 |
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_19일차_''객체지향원칙 OOP" (3) | 2024.12.27 |
