Wecode 1주차 사전스터디 HTML/CSS로 자기소개 페이지 구현하기
1주차의 사전스터디는 HTML/CSS를 학습하며 자기소개 페이지를 만드는데,
페이지를 구축하며 적용한 태그들을 정리하여 포스팅 할 예정이다.
🙋HTML/CSS 스터디 과정에서의 MISSION🙆
- Navigation bar를 자기소개 페이지 상단에 추가하고, 스크롤을 내려도 고정되도록 효과를 주세요
- Navigation bar에 메뉴를 클릭할 때 색상이 바뀌도록 css 효과를 주세요
1. HTML의 정의
웹 문서를 만들기 위한 기본적인 웹 언어의 한 종류로, 하이퍼텍스트 작성을 위해 개발 된 언어이다.
2. HTML의 문서 기본 구조
<!DOCTYPE html> <!--현재 문서가 HTML5로 작성 된 웹 문서라는 의미-->
<html> <!--웹 문서의 시작과 끝을 나타내는 태그-->
<head> <!--웹 브라우저가 웹 문서를 해석하여 표시하기 위한 태그, style과 script도 포함하여 작성할 수 있다.-->
<title>inah Velog</title> <!--브라우저의 제목 표시줄에 표시되는 내용-->
<meta charset="utf-8"> <!--문자 인코딩 방법과 문서의 키워드와 요약 정보를 지정-->
<meta name="viewport" content="width=device-width"> <!--사용자의 디바이스에 width값을 맞추는 meta태그-->
<link rel="stylesheet" href="wecodestudy.css"> <!--CSS의 경로를 지정해주는 태그-->
</head>
<body> <!--웹 브라우저에 실제로 나타나는 부분-->
<h1>HTML?</h1> <!--제목태그로, hn태그라고한다. h뒤에 숫자가 커질수록 사이즈가 작아진다 자동으로 줄 바꿈이 된다.-->
<p>HTML = Hypertext Markup Language!</p> <!--문단태그로, hn태그와 마찬가지로 자동으로 줄 바꿈이 된다.-->
</body>
</html>3. HTML 문서 작성 주요 태그
- hn : 제목태그 - h1~h6까지 제목을 지정할 수 있는 태그로 n값이 높을수록 사이즈가 작고
줄 바꿈이 되는 텍스트 태그 - p : 문단태그 - 단락을 만들어 줄 바꿈이 되는 텍스트 태그
- a : 링크태그 - 텍스트 혹은 이미지에 링크를 걸어주는 태그
- div : 웹페이지에 각 영역을 구분해주는 태그 - HTML요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나, 자바스크립트의 특정 작업을 수행하는 컨테이너로 쓰이는 태그 CSS와 함께 웹 페이지의 레이아웃을 설정하는데 사용된다.
<!DOCTYPE html>
<html>
<body>
<div style="background-color:#ffe6e6;"><p align="middle">#ffe6e6;</p></div>
<div style="background-color:#ffb3b3;"><p align="middle">#ffb3b3;</p></div>
<div style="background-color:#ff8080;"><p align="middle">#ff8080;</p></div>
</body>
</html>div 예시 적용)
- !-- -- : 주석태그 - html 문서에 주석을 달 수 있는 태그
- table : 표 태그 - 표의 시작과 끝을 나타내는 태그 (border 값을 줘야 표가 생성)
- tr : 표 행 태그 - 표의 행을 시작하는 태그
- td : 표 열 태그 - 표의 열을 채우는 태그 TD = Table Data 열에 들어갈 데이터를 작성하는 태그
- br : 줄 바꿈 태그 - 작성한 수 만큼 줄을 바꿔주는 태그
4. 태그 속성
특정한 태그에만 속성을 주는 'class', 'id'
<!DOCTYPE html>
<html>
<head>
<style>
.team{color:#ffb3b3; text-align: center;}
#olaf{color:#ff8080; text-align: center;}
</style>
</head>
<body>
<div>
<h1 class="team">Team</h1>
<h1 id="olaf">Olaf</h1>
</div>
</body>
</html>class와 id 예시 적용)
Class는 스타일시트에 작성 시 '.team'으로 작성, ID는 '#olaf' 형식으로 작성한다.
TMI - CLASS와 ID관련해서 더 꼼꼼히 정리하고 싶은데 글로 풀어 쓸 수가 없다 ㅠㅠ
나중에 레벨업하고 다시 와서 더 멋있고 간결하게 정리해야겠다.
Backend Developer