오늘의 생각
시작하며
3일 동안 페어프로그램을 진행하면서 다양한 알고리즘 공격에 치이다 오늘은 리프레쉬 느낌으로 HTML/CSS 언어 학습시간이 도래하였다~! 아 이 좋 아 > _<
웹 개발에 있어 확실히 시각적인 요소가 흥미유발에 중요한 부분이기도하고 나 역시도 HTML/CSS에 매력을 느껴 프론트앤드 개발자를 꿈꾸게 된 계기가 되어 여기까지 흘러왔다.
오늘은 HTML/CSS 학습을 통해 지친 심신(?)을 달래고 어제 못다한 알고리즘 복습/오답노트를 작성해야겠다~~!
오늘의 학습내용
1. 웹개발 요소
1) HTML
: 웹페이지의 전체적인 틀/구조(Structure)를 담당하는 마크업 언어
2) CSS
: 웹페이지의 구조 디자인을 담당하는 스타일 언어
3) Javascript
: 웹페이지와 유저와의 전반적인 상호작용(Interaction)을 담당하는 프로그래밍 언어
2. HTML 톺아보기
1) HTML 구성 요소
: HTML이란 Tag <> 들의 집합
: Tree 구조로 이루어짐
2) Tag
2-1) Tag 종류
<div> division : 한줄을 모두 차지
<span> span : 콘텐츠의 크기만큼 차지
<img> image : 이미지 삽입 / 닫는 tag가 없음
<a> link : 링크 삽입 / 새창으로 링크 연결 시 target = "_blank" 코드 삽입
<ul> & <li> unordered list & list Item : 리스트 삽입(<ol>은 Ordered list)
<input> input: (Text, Radio - 그룹생성 가능(name = "" 삽입) / 1가지만 선택 가능, Checkbox - 다중선택 가능)
<textarea> multi line text input : 다중 라인으로 텍스트 입력 가능
<button> button : 버튼 생성2-2) self closing tag
- input tag
- img tag
2-3) p tag / div tag 차이
- p tag : 문단 표현 시 사용 / 여백 유
- div tag : 시맨틱 의미 없음 /여백 무
3) 웹페이지 만들기
웹페이지를 만들기 위해 HTML 작성 시 아래와 같은 과정이 필요하다.
- 프로토타입 작성
- 큰 틀에서 영역 나누기
- 각 영역을 태그로 표현하기
- 작은 태그들을 큰 영역으로 감싸주기
4) id/class 사용하기
목적
id : 고유한 이름을 붙일 때
class : 반복되는 영역을 유형별로 분류할 때
프로토타입 표기법
id : 태그명#id명
class : 태그명.class명
3. 시맨틱 요소
: 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석됨.
: HTML언어 자체적으로 태그에 의미를 주어 중요한 요소 및 의미를 구분하기 위해 쓰임.
1) 시맨틱 요소를 사용하는 이유
*div 태그 및 CSS를 활용하여 같은 효과를 낼 수 있는데 왜 HTML에서 시맨틱 요소를 써야할까?
-
검색 엔진이 시맨틱 요소를 더 선호하며 검색 시 시맨틱 요소를 중요한 키워드로 고려함. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있음.
-
개발자끼리 협업 시 편리함. 데이터 유형 예측 용이.
2) 시맨틱 요소의 종류
<article> : 독립적이고 자체 포함된 콘텐츠 지정.
<aside> : 본문의 주요 부분을 표시하고 남은 부분. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용.
<footer> : 가장 아랫부분에 위치. 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용.
<header> : 가장 윗부분에 위치. 사이트의 제목이 보통 들어감.
<nav> : 내비게이션(navigation)의 약자. 일반적으로 상단바 등 사이트를 안내하는 요소. 보통은 안에 <ul>을 넣어 목록 형태로 사용됨.
<main> : 문서의 주된 콘텐츠를 표시.