오늘은 어제수업에 이은 두번째 HTML 배우기!
3. Contents
h1, h2, h3, h4, h5, h6
이미지와 같이 h1,h2,h3 순서대로 작성할 것!!! 기억하기!!!
* 순서대로 입력하니 글자크기가 크고, 작고 다양한 것이 인상 깊었어요 👍
h1 이 h2 보다 글자크기가 크고 밑줄과 같이 같은h2는 크기가 같은 점 ✔
a (앵커)
다른 새로운 페이지나 현재 페이지의 위치,파일, 이메일 주소 등 다른 URL로 연결하는 하이퍼링크를 만들어준다.
인라인요소! 예외로 블록요소를 포함할 수 있다.
보여지는 모습은 ?
하나씩 배울 때마다 화면에 나타나니깐 너무 재밌는거 있죠 ㅎㅎ 프론트엔드에 묘민가 이게? ㅎㅎㅎㅎ
strong
- 굵은 글꼴 / 스크린리더가 strong 사이 문자는 거센 억양으로 소리를 내어 발음 해준다.
strong으로 인해 글꼴이 진해진 모습! 👌
* 강의를 듣다고 어떤분께서 <b>도 사용가능한데 차이여부를 물으셨당! b는 뭐지? ❔
<b> 는 독자의 주의를 요소의 콘텐츠를 끌기 위한 용도? 이게 뭔말인교?ㅋㅋㅋㅋㅋ
강사님께서 b랑 strong 둘다 강조는 되지만 b는 의미를 갖기 않기에 사용 지향한다고 말씀해주셨당
홈페이지 글자하나하나가 다 의미가 존재해야하구나.. 배울 때마다 깨우치고 있다...👍
hr
실제 화면에서 한 줄처럼 생성된다 / 한편, 같은 느낌?!
ol
순서있는 목록! / 순위 표시할때, 요일 콘텐츠 등 사용한다.
위 이미지처럼 입력했을 때 type에 1을 넣으니 숫자 순서대로!
만약 i를 넣으면? i ii iii 👍
ul
그럼 ol 처럼 숫자가 아니라
ul을 사용한다면?!
이렇게 표시 된다. 순서가 중요하지 않을 때 써야지!
li
단독으로 사용할 수 없음 / ol, ul 자식요소로 사용가능
* 자식이 아닌 자손요소론 다른 태그 사용가능!!!!
img
문서에 이미지를 삽입
마크로웰 앤드리슨(모자이크 웹 브라우저 및 넷스케이프 내비게이터를 개발)
전 강사님께서 이분에 대해 이야기해주실 때 되게 흥미있더라구요!!!
역사가 재밌다고 느껴진건 오랜만이랄까요 ㅋㅋㅋㅋㅋ 꿀잼이였습니다 ㅎㅎ
궁금하신분들도 찾아보면 좋으실거 같아요!!!👍
이렇게, src 는 경로 / alt는 이미지에 대한 설명이지만
밑에 이미지를 설명하는 글이 있다면 alt="" 생략말고 빈값으로!
이렇게, 글에 추가가 되는 걸 확인 완료!
지금까지 배운걸 바탕으로 과제를 내주신 강사님!
해보자아아아!!!!💨
그래서 작성된,
부족한 나의 과제결과물,,,ㅎㅎㅎㅎ
그래도 이렇게 나오니 너무 뿌듯한거 있죠 ㅠㅠ!! 이런재미인가봐..ㅠ
그래도 과제 성공..!!!!! 더 열심히 해서 깔끔하게 해봐야징 👌
form
- 사용자에게 입력받은 정보를 제출하기 위해!!!
method 속성
post
- 브라우저에 의해 저장되지 않으며 히스토리도 남지 않는다.
쿼리 문자열과는 별도로 전송된다.
* 쿼리문자열 : 주소창에 ? 의미
get
get 방식은 브라우저에 의해 캐시되어 저장된다.
post와는 다르게 쿼리 문자열에 포함되어 전송되므로 길이 제한 존재
*길이 제한으로 인해 용량 한계
보안상 취약점 존재하므로 중요한 데이터는 post 방식 사용!!!!!
url 노출과 브라우저에 캐시가 저장되기때문에 보안성 문제가 많아보이네용 !ㅎㅎ✔
autocomplete 속성
우리가 매일 자주 보았던거 !!!! 이게 이렇게 보여지는 거였군... 놀랍
브라우저에 기록이 남아있을 경우, 이미지와 같이 화면에 표시된답니다 ㅎㅎ
label
사용자 인터페이스의 항목을 나타냄
요렇게, label를 이용해 입력하면,
로그인 할때 항상 보던 장면이 빠밤!!!!
이렇게 label 과 input을 중첩하여 사용가능 하지만 label 안에 제목요소 배치 금지!
제목의 경우 fieldest legend를 이용하여,
이미지와 같이 제목을 사용한다. ㅎㅎㅎ
button
- 사용자가 클릭할 수 있는 요소
버튼!!! ㅋㅋㅋ 뭔가 기엽
버튼의 타입
1. button: 기본 행동이 없습니다. 클릭했을 때 아무것도 하지 않습니다. JavaScript와 연결하여 사용합니다
2. submit: 서버로 양식 데이터를 제출합니다
3. reset: 초깃값으로 되돌립니다.
잘기억해두기 👌
input............
적기엔.... 너무...마...많네....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
하나씩 어떤것들이 있나 열심히 해보는중 .. 끄적...끄적
input 유형 엄청 많으니깐 열심히 적어가며 배우는걸로 ,,( 블로그가 귀찮아서 안적는건 아니랍니다..^ *아마..)
checkbox / radio
checkbox 의 경우 선택하거나 해제도 가능하다!
이렇게 다중 선택도 가능하고 선택해제도 가능하다.
하지만! radio 는?!
사과를 클릭한 순간 선택 자체를 해제할 수는 없고 배라도 눌러야 한다 !!!
선택사항 중 무조건 한개는 선택하여야 한다 기억하자!
file
이렇게 input에 파일을 입력해주면,
이미지와 같이 파일선택 버튼이 나오고 누르게되면 파일 선택 가능!
( + 하나하나가 전 너무 신기방기 중ㅋㅋㅋㅋㅋㅋㅋㅋ)
optgroup
옵션 요소를 그룹으로 나눌 수 있는 친구인데,
이것으로 옵션을 포함시키게 되면!
포유류 - 원숭이, 개, 고양이
파충류 - 도마뱀, 뱀
으로 묶이게 되면서 선택할 수 있게된다!
table
이름과 같이 테이블(표) 생성할 때 사용된다.
이미지와 같이,
tr 은 테이블에 가로 (행) 을 의미하고
th은 행,열의 제목을 의미
td은 셀 내용 즉 데이터를 의미한다.
caption은 표의 제목이나 설명을 적을 때 사용하므로 필수 요소는 ❌
header, main, footer 처럼 테이블 구성하는 것도 구역이 존재하는데
머리글 ( thead )
본문( tbody )
바닥글( tfoot )
이것을 사용하여 구역을 나눈다!
또한,
colspan 으로 같은 데이터들의 열을 병합하고
rowspan을 사용하게되면,
짜장면이 묶이게 된다.
이게참... 배우면서 헷갈리는데
테이블이 행, 열은 왜 이렇게 헷갈릴까요?
나만그런가?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
...
그러면! 저 색깔은 어떻게 주었냐!
col을 이용하여 각각의 열을 묶는다는 개념으로 생각하기
col을 이용하여 3개의 덩어리로 된 열이라 생각하고
* 여기서 열이 4개라면 col 은 4개를 입력!
클래스를 정의하여, css와 함께
스타일에 이렇게 입력해주면!!!
이쁜색깔이 2번째 수요일 열에 전부 입력이 됩니다!!! ㅎㅎㅎ
3번째 col에 클래스를 넣어주면 금요일에 색깔 등장!
오늘의 수업은 여기 까지 배웠는데
느낀점으론 프론트엔드는 확실히 보여지니깐 더욱 배우는 맛이 난다는걸
계속 느끼고 있는거 같아요 ㅎㅎㅎ
테이블 같은경우, 행과 열이 조금 헷갈리는 거? ㅋㅋㅋㅋㅋㅋㅋ 연습하다보면 괜찮아지겠죠? ㅋㅋㅋ
설명과 듣기만 해서는 머리에 안박히는 느낌인데
강사님께서 새로운 태그가 나올때 마다 입력을 통해 설명해주면서
제가 직접 화면도 보고~ 입력도 해보고~
손이 움직이니깐 머리에 다이렉트로 박히는거 있죠 ㅎㅎㅋㅋㅋ!!👍
오르미 시작하고 첫 주말이 다가오고 있는데, 오늘 내용을 바탕으로 과제 내주신거 풀어봐야겠어요 ㅎㅎ
+ 강사님께서 이 수업을 통해 프론트엔드에 재미 붙이는거 아니냐고 장난삼아 말씀하셨는데
진짜 그럴지도 모르겠네요 ㅋㅋㅋㅎ그만큼 알아가니 즐거운 하루였어요!
오늘도 열심히 배웠고,
주말 복습 파이팅!!!!!!!!!
'[4기] 백엔드 개발자 부트캠프 "오르미" ~ing > [4기] 백엔드 개발자 부트캠프 오르미 수업 복습' 카테고리의 다른 글
| [백엔드 개발자 부트캠프 '오르미4기'] 8일차 CSS 배우기2 (4) | 2024.01.09 |
|---|---|
| [백엔드 개발자 부트캠프 '오르미4기'] 7일차 CSS 배우기1 (4) | 2024.01.08 |
| [백엔드 개발자 부트캠프 '오르미4기'] 3일차 HTML 배우기 (2) | 2024.01.04 |
| [백엔드 개발자 부트캠프 '오르미4기'] 2일차 Git/Git Hub (2) | 2024.01.03 |
| [백엔드 개발자 부트캠프 '오르미4기' 1일차] 네트워크 기초 배우기 (0) | 2024.01.02 |