HTML (HyperTex Markup Language)
네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계
네이버를 예시로 들어보면
CSS가 빠지고 HTML로만 이루어진 네이버 브라우저는 이렇게 생겼다.
즉, 브라우저에서 뼈대 역할을 하는 것이 HTML이다.
HTML은 각각의 태그<tag>를 통해서 웹페이지에 보여질 내용을 나타낸다.
HTML 핵심 3가지
태그의 특징 - Inline / block
block : 페이지의 가로 넓이 전체를 차지하는 요소
inline : 자신의 크기만큼만 차지하는 요소
종속태그
HTML 문서 구조
<html>
<head>
검색엔진을 위한 영역
</head>
<body>
브라우저에서 보여지는 영역
</body>
</html>
html vscode 실습
<html>
<head>
</head>
<body>
<!-- 이것은 회원가입 폼입니다! -->
<h1>회원가입</h1>
<input type="text" placeholder="이메일을 입력해 주세요." /><br /><br />
<input type="text" placeholder="이름을 입력해 주세요." /><br /><br />
<input class="qqq" type="password" placeholder="비밀번호를 입력해 주세요." /><br /><br />
<input id="zzz" class="qqq" type="password" placeholder="비밀번호를 다시 입력해 주세요." /><br /><br />
<select>
<option disabled selected>지역을 선택하세요.</option>
<option>서울</option>
<option>경기</option>
<option>인천</option>
</select><br /><br />
<input type="radio" name="aaa" />여성 <input type="radio" name="aaa" />남성 <br /><br />
<input type="checkbox" />이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
<hr />
<button>
<h1>가입하기</h1>
</button>
<!-- <input type="button" value="가입하기" /> -->
</body>
</html><h1>은 제목을 표현할 수 있다.
<br />는 엔터 한번의 의미가 있다.
각 태그에는 속성을 부여할 수 있다.
CSS
html의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다. 일반적으로 보는 웹 브라우저가 html에 css가 입혀진 모습이다.
- CSS 사용 방법 3가지
html 태그에 입력하기
style 태그에 입력하기
css 파일 만들어서 불러오기 → 주로 실무에서는 이 방법을 많이 사용하는데, 유지보수의 용이함을 위해서이다.
박스 모델
border-box는 위의 박스모델에서 border의 크기를 고정하고, content-box는 content의 크기를 고정한다.
따라서 border-box는 크기를 조정했을 때 border를 중심으로 안쪽 content의 사이즈가 조절되며, content-box는 border의 사이즈가 조절된다.
실제로 디자이너와 협업을 할 때에 디자이너가 준 이미지의 크기에 맞추기 위해 border의 크기를 고정시키고 안쪽의 크기를 조절하는 방식으로 사용한다.
CSS의 박스모델 default값은 content-box이므로 border-box로 변경 후 사용할 것!
Flex
여러 태그를 한 줄로 묶고 정렬하는 기능
display: flex;로 기본 정렬 후 세부적으로 조절한다.
위의 내용은 구글 검색창에 froggy를 검색하여 퀴즈를 통해 실습 및 연습해볼 수 있다!
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'Review' 카테고리의 다른 글
| [코드캠프] 프리캠프 3일차 (0) | 2021.10.27 |
|---|---|
| [코드캠프] 프리캠프 2일차 (0) | 2021.10.27 |
| 메가 IT 아카데미 자바 웹프로그래밍과정 청강 1, 2일차 후기 (0) | 2021.10.18 |
| 메가IT 아카데미 세미나 <NAVER 개발자가 말하는 WEB 백엔드 공부는 이렇게> 후기 (0) | 2021.10.14 |
| 스파르타 코딩클럽 신년운세 패키지 2일차 (0) | 2021.09.21 |
