DAY 005_회고록. 코드스테이츠 1주차 - HTML (태그)

슈레더·2021년 6월 18일
0

코드스테이츠

목록 보기
5/25
post-thumbnail

어느새 1주차가 마무리되었다. 오늘은 간단하게 HTML 기본 태그들을 배우고,
하루의 대부분을 혼자 공부하는 시간을 가졌다. 수업 끝나기 전 동기부여와 간단한
회고록을 작성하는 파트가 있었는데 해당 주차가 끝날 때마다 작성한 회고록을 블로그에 옮겨보려 한다.

회고록

  • 사실

자바스크립트 기초 문법(변수, 타입, 함수, 조건문, 문자열, 반복문) 및 HTML 기초 문법(자주 사용하는 HTML 태그)을 배웠으며, 배운 내용을 토대로 페어 분과 함께 한 문제씩 번갈아 가며 코플릿을 풀었다. 코플릿은 모두 초기화하여 최소 3번 이상 반복하여 풀었으며 최대한 레퍼런스 코드를 보지 않으려 했고 정말 안 풀리는 문제는 구글 검색을 통하여 해결했다.

  • 느낌

스스로도 기초 문법이 취약하다고 생각했고 강의를 듣고 각각의 기능에 대한 이론은 충분히 이해한 것 같았지만 막상 코플릿에서 이걸 응용하는 게 쉽지 않았다. 특히 반복문 파트부터 난이도가 급격히 올라간다는 느낌을 받았고 수업 이후 코플릿을 다시 풀어도 문제당 시간이 많이 소요되었다. 나름 기초 문법에 대해 이해했다고 생각했는데 문법만 안다고 중요한 것이 아니라 어떻게 문제를 해결해 나가야 할지에 대한 응용력 및 논리력이 중요하다는 것을 느끼게 되었다.

  • 발견점

조건문 공부를 할 때 자꾸 return을 누락했다. 이런 실수를 알고 고치니 조건문 코틀릿 문제 푸는 시간이 많이 단축됐다. 그리고 아직 경험이 부족해 익숙지 않은 걸 머리로 이해하는 데도 문제가 안 풀리는 것에 대해 압박감이 심했다. 하지만 문제 하나 푸는 데 가만히 오랜 시간을 집중하는 걸 보면 나름 끈기와 집중력이 있는 것 같다.

  • 다음주를 위한 행동

절대 자만하지 말고 공부한 내용을 매일 블로그로 정리할 것이며, 눈으로만 공부하는 것이 아닌 계속 시행착오를 겪으면서 코딩 연습을 꾸준히 할 것이다. 또한 기초가 가장 중요하다고 생각하기 때문에 기초 부분은 계속 복습할 것이다.

HTML

HTML이란?

Hyper Text Markup Language의 약자.
웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어.

HTML의 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Script-Type" content="text/javascript"> 
  <meta http-equiv="Content-Style-Type" content="text/css"> 
  <title>HTML 4.01 문서타입</title> 
  <link rel="stylesheet" type="text/css" href="css/service_name.css"> 
</head>
<body>
  
</body>
</html>

자주 사용하는 태그

html, head, title, body

<html></html>

HTML 문서. 파일 시작과 끝에 위치.

<head></head>

본문에 대해서 설명하는 곳으로 브라우저에는 나타나지 않는다

<title></title>

책 표지와 같은 정보로 사용, 설정하지 않으면 파일명이 제목이 되어버린다

<body></body>

브라우저에 실제로 표시되는 내용.

div, span

<div></div>

분할 영역을 지정하는 태그.
Block 특성을 가짐. width와 height의 영향을 받음.
새로운 라인에서 시작, 화면 크기 전체의 가로폭 차지.

<span></span>

inline 특성 가짐. (새로운 라인에서 시작하지 않음)
줄 바꾸지 않고 다른 요소와 함께 한 행에 위치, 옆으로 붙는 속성.
content의 너비만큼 가로폭 차지.
width, height, margin-top, margin-bottom 프로퍼티 지정 불가능.

ul, ol, li

<ul></ul>

li의 부모태그로 반드시 자식태그를 가짐.
Unordered list의 약자로 점이 앞에 찍힘.

<ol></ol>

li의 부모태그로 반드시 자식태그를 가짐.
Ordered list의 약자로 숫자가 앞에 찍힘.

<li></li>

리스트 태그.
반드시 부모 태그 ul, ol이 필요함.

input

<input type= "text" placeholder= "type here">
<input type="radio" name = "option1"> 
<textarea></textarea> : 여러 줄 쓰기 가능 
<input type="checkbox"> 

Text와 Radio, CheckBox 등을 삽입할 때 사용.

a

<a href(hypertext reference의 약자)= "주소" target="_blank" (새로운 창에서 열림)
 title="링크에 마우스 댔을때 뜨게하고 싶은 이름"> 

anchor 닻을 의미하는 것으로 정보의 바다에 정박한다는 시적인 의미를 가짐.
link를 의미하며 HyperText에 해당한다.

strong, b, h1~h6

<strong></strong> 

글자를 두껍게 만듬. sementic함.

<b></b> 

글자를 두껍게 만듬. sementic하지 않음.

<h1></h1>
<h2></h2> 
<h3></h3> 
<h4></h4> 
<h5></h5> 
<h6></h6> 

제목 태그.
크기가 지정되어 있으며 숫자가 커질수록 크기가 작아짐.

img

<img alt="해변에 서있는 바위뛰기펭귄." src="penguin.jpg">

이미지 태그.
width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옴.

p, br

<p></p>

단락을 나누는 태그.
닫는 태그 필수.
sementic 태그.

<br>

줄바꿈 태그.
닫는 태그가 없음.

profile
shreder0804

0개의 댓글