Recording/멋쟁이사자처럼 BE 13기

[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_22일차_"HTML과 CSS"

LEFT 2025. 1. 2. 17:27

🦁멋쟁이사자처럼 백엔드 부트캠프 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>
<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>태그로 그 줄의 공간을 분리 ➡️띄어쓰기를 하지 않아도 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> : 가로로 셀을 합침

<table>

  • 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로 설정. 입력하는 글자가 표시되지 않음

<form>

HTML 앵커 (Anchor) 기능

<a href="주소"> 내용 </a>
  • 하이퍼링크 태그를 의미
  • 내용부분을 클릭하면 주소로 접속가능

시맨틱 태그 Semantic Tag

  • <body> …시맨틱 구조들… </body> 안에 시맨틱 구조 태그들이 위치한다.
  • <header> : 헤더, 로고나 제목의 페이지 상단 표시
  • <main> : 페이지의 주 콘텐츠를 표시
  • <nav> : 네비게이션, 웹사이트의 메뉴, 탭 등
  • <aside> : 사이드에 위치하는 공간, 페이지 콘텐츠를 제외한 콘텐츠 정의, 주로 사이드바 (게시판 목록 등)
  • <section> : 여러 중심 내용을 감싸는 공간, 페이지를 여러 주제나 하위 목록으로 형성
    section안에 section을 넣을 수도 있음, 주로 <main>태그 안에 위치

  • <article> : 내용, 독립적인 글을 다룸, 블로그 게시물, 상품 리뷰 등
  • <footer> : 꼬리말 부분에 표시되는 내용, 저작권, 연락처, SNS 계정링크 등
  • <address> : 표시할 주소를 작성

출처 :  https://seo.tbwakorea.com/blog/what-is-semantic-tag/

  • ⚠️시맨틱 구조 사용시에는 스타일 지정, 자바스크립트 목적을 제외하고는 <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 옵션

  • 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%정도로 보임

opacity 실습

<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를 통해 스타일을 적용하는 것을 기억할 수 있게 되었다.🚀

저작자표시 (새창열림)