당일회고
드디어 첫수업을 시작했다.!! 오늘은 html 을 학습했다.
사전에 공부를 해서 어렵게 느껴지진 않았다.
물론 학습을 하지 않았어도 집중만 한다면 그리 어려운 내용은 없었던거 같다.
원래는 첫날부터 자바스크립트로 바로 진도가 나갔었다고 한다.
근데 우리 기수부터 html 부터 학습을 시작한 첫 기수라고 들었다.
나는 html 부터 시작하는게 당연하다고 생각했었는데 원래는 아니였다니!!
html 과제를 수월하게 끝내고 기수분들이 올려놓은 과제들도 보았다.
멋지시고 목표가 확고한 분들이 많았다! 같이 페어활동하고싶다!!🙌
복습
키워드 : html, css, javascript, id, class, form, input, tag, select, img, href, a, src, 시멘틱요소, ide, div, span, label
한줄설명
html : 웹 페이지상 구조를 표현하기위한 마크업 언어 (뼈대를 만든다 생각)
css : html 으로 만든 구조에 스타일을 입히는 것 (옷을 입힌다 생각)
javascript: html&css를 보다 동적으로 사용하기 위한 스크립트기반 언어
id : 하나의 html문서에 하나의 고유한 id값(value)이 존재해야함
class : id와 반대로 하나의 html문서에 여러 class값(value)이 존재할 수 있음
form : 사용자입력을 필요로하는 input,select 과 같은 요소들을 묶어주는 요소
input: 사용자 입력을 받을 수 있는 요소
tag : element(요소)의 구성요소이다. 열린,닫힌 태그가 존재하고 열린태그만 있는 요소도 있다.
select: form 요소안에 자식요소로 있어야하고 또 자식으로 Option 요소를 가진다.
img : 이미지를 웹 페이지에 나타내고 싶을때 사용! 속성으로는 src가 있다
href: 이동하고자하는 경로(위치? 주소? 아이디값 등)를 값으로 받음
a : anchor (앵커) 로 링크를 나타내고 싶을때 사용
<a href="">content</a> target 속성으로 새페이지에 나타낼 수 있음
src : source 로 해당요소가 원하는 파일의 경로를 나타냄
시멘틱요소 : 의미가 있는 요소들의 사용으로 과거 div 지옥을 탈출할 수 있게됨
ide : 통합 개발 환경으로 프로그래머들이 개발에 관련된 모든 작업들을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어 vscode 파이썬 등이 있다.
div : 의미가 없는 태그이고 레이아웃을 지정할때 주로 사용 그리고 block 레벨이다.
span : 의미가 없는 태그이지만 div 와는 다르게 요소의 크기만큼 공간을 차지한다 inline 레벨
lable : 이름표라 생각! Input 요소와 자주 쓰이는데 시작태그만 있다보니 그옆에 label 태그를 통해 텍스트로 명시해줄 수 있다.
상대경로: 현재 작업폴더를 기준으로 특정 파일의 상대적인 위치를 나타냄
- ./index.html
- ../상위폴더/index.html
- html/index.html
- ../ 입력시 === 상위 폴더로 갈 수 있음!!
절대경로: 현재 작업폴더와 관계없이 특정 파일의 절대적인 위치를 가리킴
http://naver.com- /index.html
-
a태그 이용 시 target 속성으로 새창에서 링크 띄우기는
<a href="" target=_blank>content</a>_blank를 입력하면 된다.
여기서 더해rel="noopener noreferrer"을 입력하게 되면 보안설정도 할 수 있다 !! GOOD!🤟 -
lable태그 이용시for속성으로 값을 정해두고input에id값을 for 속성과 동일하게 하면label와input요소가 묶이게 된다! -
Input요소 중checkbox와radio가 헷갈린다.
checkbox: 중복으로 체크하기 가능 ⭕️
radio: 속성으로 동일한 name 으로 묶어준다면 중복으로 체크 ❌ -
<p class="열공">안녕</p>element(요소)내 용어 정리
<p>: 시작 태그 (열린 태그)
class="열공": 속성
class: 속성 이름
"열공": 속성 값
안녕: content 콘텐츠
</p>: 종료 태그 (닫힌 태그) -
HTML에서의 속성과 CSS에서 말하는 속성은 번역과정에서 이름이 동일한것 뿐이지 단어는 다른 단어이다.
속성(attribute): html에서의 속성
속성(property): css에서의 속성 -
링크일 경우: 속성으로href사용
링크가 아닐경우(이미지,비디오 등): 속성으로src사용
css에서는: 항상url사용
