2일차에 많은 것을 배울 수 있었습니다. 배운것들을 한번 복습해봅시다! (혼잣말, 반말 주의 ㅠㅠ)
웹 개발에 있어서, 앞으로 주로 학습할 JavaScript와 짝을 이루는 두 언어가 있습니다.
바로 HTML과 CSS입니다.
간단하게 설명하자면, HTML은 구조, 틀을 만드는 마크업 언어,
CSS는 스타일을 담당하는 디자인 언어입니다.
JavaScript는 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는(상호작용) 역할을 한다고 할 수 있습니다. => 프로그래밍 언어
(잠깐만)
Visual Studio Code
=> 텍스트 에디터! / 무료 / 마이크로소프트 / 여러 익스텐션 설치 가능!!
=> Open Folder 기능이 가장 간편하다, 이걸로 아예 폴더째 열도록 하자!
=> Live server 익스텐션을 통해, 브라우저를 편하게 바로 열 수 있다.
(새로고침도 필요없다 굿!)
HTML은 tag들의 집합이다!
Tag는 <>로 묶인 HTML의 기본 구성요소, <>로 시작해서 </>로 끝난다.
Tree structure이라고 한다! ( 상위의 태그(부모태그)에 따라 자식 태그들이 있다 )
간혹 self - closing tag 라는 것이 있는데, <.../>와 같이 표현 가능
| div 태그 | span 태그 | img 태그 | a 태그 |
|---|---|---|---|
| 한 줄을 차지합니다 | 컨텐츠 크기만큼만 공간을 차지합니다 | 속성이라는 것이 존재한다. src="https://..." | 링크삽입 (하이퍼텍스트), 눌러서 이동 ( href 속성 -> 이동 주소, target 속성 -> 새 탭, 새 창 ) |
그리고,
| ul ol 태그 | li 태그 | input 태그 | textarea 태그 |
|---|---|---|---|
| ul은 순서가 없어! ol은 순서가 있어 | 트리구조로 각각의 태그안에 li로 채워넣을 수 있어! | type 속성으로, 여러가지 입력 폼이 가능해! => placeholder 라는 속성으로 입력폼안에 들어가야 할 내용을 힌트처럼 미리 채워줄 수 있어 | 일반 input text와는 줄바꿈이 가능하다는 차이점이 있어! |
참고) radio와 checkbox 차이가 뭐니? => 하나만 가능, 여러 개 가능의 차이다!
주의) radio로 하더라도 같은 그룹으로 묶어줘야해 ( name 속성으로 그게 가능하다!! )
EX) <input type="radio" name ="group"/> 옵션1 <input type="radio" name="group"/> 옵션2button 태그 내에 아래와 같이 이름을 써줄 수 있어
EX) <button>눌러주세요</button>시맨틱 요소란?
시맨틱 요소란 의미를 가지는 태그들!! 시맨틱 요소 중 하나인 h1 요소를 생각해보면, 최상위 제목(top level heading)을 표현할 때 사용하는 요소인 h1 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다!! 이와 같은 효과는 기존의 태그들을 활용하여 h1 요소와 똑같이 보이도록 할 수 있다! 그러나요소를 사용할 때처럼 의미가 존재하지는 않는다!
시맨틱 요소를 사용해야 하는 이유
첫째, 검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다. 시맨틱 요소를 중요한 키워드로 고려합니다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것입니다. 둘째, 여러 개발자가 함께 작업할 때시맨틱 요소의 종류
article
: 독립적이고 자체 포함된 콘텐츠를 지정합니다.aside
: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.footer
: 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.header
: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.nav
: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 ul 태그를 넣어 목록 형태로 사용합니다.main
: 문서의 주된 콘텐츠를 표시합니다.HTML 작성 요령!!!!!!!!
1. 일단 큰 틀에서 영역 나누기- 각 영역을 태그로 표현하기
2-1. 여러 태그를 하나의 div로 감싸기!
section 태그를 이용해볼만하다. (의미가 있는 시맨틱)
참고 ) form 태그의 경우엔, 페이지 전환이 되는 액션이 발생할 수 있으므로, 주의가 필요
id와 class를 사용하기!
1) id => 고유한 이름을 붙일 때 (중복을 허용하지 않는다!)
2) class => 반복되는 영역을 유형별로 분류할 때
selector 사용하기
div#writing-section
div.writing-section 처럼 편하게 표현할 수 있다
그런데 뜬금없이 label 태그를 마주하게 되었습니다!! 두둥!!
이것이 무엇인가 하니 label을 사용하지 않았을 때는 input태그를 정확히 클릭해줘야만
입력이 가능합니다. label을 사용해주니 이름표를 클릭하기만해도 체크박스 선택/해제가 가능하네요
출처 : https://jigeumblog.tistory.com/61 => 감사합니다!!
