<HTML> 2022.5.16 일 1일 차 기록

첫날은 오티만 보통 진행한다고 했는데 간단하게 수업도 진행되었다.

HTML의 자주 쓰이는 태그와 약간의 실습을 곁들였는데 실습코드는 조금만 올리고 태그에 대한 설명만 올리도록 하겠다.

-----------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<!-- head : 브라우저의 실행화면에 보이지는 않지만 HTML 문서에서

필요한 사항이나 특수기능을 설정할 때 사용한다 -->

</head>

<body>

이곳에 글을 작성하면 웹 페이지에 자동으로 반영된다.

</body>

</html>

-----------------------------------------------------------------------------------------------------

......????????

ㅋㅋㅋㅋㅋㅋ 예시코드 제목이 "지옥에 온걸 환영한다" ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

오티때도 그렇고 강의도중에도 강의를 끝마치면서도 강사님이 프로그래밍이 자신의 길이 아닌것 같으면 빨리 떠나라고

거듭 강조하셨다ㅋㅋㅋ

~~안돼...!! 프로그래머로 취업시켜줘!!!~~

여담은 여기까지하고 이제 처음이자 마지막으로 html기본 화면에 대해 설명하겠다.

------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

------------------------------------------------------------------------------------------------

자신이 사용하는 코드 편집기를 키고 HTML을 작성하기 위한 기본 베이스를 만들면 이렇게 뜬다.

(나는 VisualStoudio Code를 사용하기 때문에 파일 확장자를 html로 설정해주고 빈화면에 !를 치면 자동완성이 뜬다)

크게 세 부분으로 나눌 수 있는데 직관적으로 봐도 알 수 있을 것이다. <html> // <head> // <body> 부분이다!

맨 첫번째 부분의

<!DOCTYPE html>

이건 자바의 import와 비슷한 느낌이다. '이 문서가 html5로 작성되었다.' 라고 명시되어있는 것이다.

그 다음

</html>

요것은 웹문서의 시작과 끝을 알려주는 것이며 lang="ko"는 내용에 한국어가 포함되었다는 것이다.

en이면 영어만 쓰였다는 뜻!

<head>

<body>

는 내 다른 글에도 그림과 같이 설명이 되어있긴 하지만 오늘 배운 내용으로 정리하자면

head : 브라우저의 실행화면에 보이지는 않지만 HTML 문서에서

필요한 사항이나 특수기능을 설정할 때 사용한다

body : 실제 웹브라우저에 표시할 내용

요렇게 정리할 수 있겠다.

실제로 javascript 인강을 들었을때 다른 곳에 있는 설정들을 끌어다 쓸때 head 부분에 주소를 명시해주는걸 봤었다.

이제 대강 HTML 문서가 어떤 모냥인지 어떤 식으로 나눠져 있는지 알게 되었을 것이다.

(사실 지금 다 몰라도 하다보면 그냥 외워진다ㅎ)

자주 쓰이는 태그들만 이제 간단히 정리한다.

1. <h> : 요 태그는 글자크기를 조절해준다. 특이하게(?) 숫자가 작을수록 글자 크기는 커진다. 보통 제목을 쓸때 많이 쓰는 것 같다.

2. <p></p> : 보통 이 안에 쓰인 텍스트를 문단, 단락 단위로 구분해준다. 그래서 알아서 들여쓰기 및 이 밖의 텍스트와 구분되게 화면에 표시를 해준다. %%% 문장이 길다고 알아서 엔터를 쳐주진 않는다%%%%%%

3. <i></i> : 이텔릭체 이 태그 안의 텍스트를 기울임체로 바꿔서 띄워준다.

4. <b></b> : bold 볼드체 글씨를 굵게 해서 표시해준다.

5. <br> : 뜨든! 자주 쓰인다. 텍스트를 깔끔하게 보이게 정리할 때 자주 쓸 것 같다. 줄바꿈을 해주는 태그인데 굳이 이게 왜 필요하냐, 웹 브라우저는 텍스트사이의 띄어쓰기 말고는 공백또는 엔터키를 인식 못하기 때문에 우리가 아무리

html 문서에 줄을 바꾸고 공백을 넣어도 브라우저에 띄우면 모두 붙어서 출력된다....

그런 불상사를 막기 위해 중간중간 <br> 태그를 넣어준다.

---그리고 보통 태그들은 자기 짝이 한쌍인데 얘는 짝이 따로 없다.

6. <ul></ul> : 순서 구분이 없는 목록을 만들때 쓰는 태그

7. <ol></ol> : 순서 구분이 필요한 목록을 구성할 때 쓰는 태그

8. <li></li> : 목록을 구성해주는 태그

붙여서 쓴 위의 세 태그는 예시를 들어야 이해가 갈 것 같아서 코드와 화면을 함께 첨부한다.

--------------------------------------------------------------------------------------------------------

<body>

<ul>

</ul>

<br>

<ol>

</ol>

<br>

</body>

------------------------------------------------------------------------------------------------------------

짜잔! 이렇게 출력화면을 함께보니 직관적으로 딱 보인다 !!

아 근데 그냥 <li>로만 만든거랑 <ul>로 묶은거랑 출력된건 큰차이 없는데 굳이 왜써?

라고 생각할 수 있다.

음.... 것도 맞는 말같지만 큰차이가 있다...!!!!!! 일단 ul이 하나의 큰 파일철로 리스트들을 묶어준다고 생각하면 쉽다.

그래서 자세히 보면 <ul> 태그를 쓴 것은 미묘하게 들여쓰기가 되어있다ㅋㅋㅋ

그리고 나중에 므찐 프로그래머가 되어서 요 리스트들을 귀엽고 깜찍하게 효과를 주거나 꾸미거나 어떤 기능을 부여하려고 할때 아주아주 큰 차이가 있다.

프로그래머는 몸을 덜쓰려고 머리를 쓰는 직업!ㅋㅋㅋ 그렇기 때문에 어떤 기능을 부여한다고 할때 ul 태그로 묶여있는 것들은 그안에 리스트가 얼마나 많든지 <ul> 태그안에 기능을 부여하는 코드 한줄이면 된다!!!!!

만약 <li>로만 만들었다면 수많은 <li>태그안에 기능을 부여하는 코드를 복붙해야할 것이다ㅠㅠ

자 하나만 더 <ol> 짜투리 하나만 추가하겠다.

<ol>태그는 순서가 있는 리스트를 만들어주는 태그라고 했다.

그렇다면 순서를 표기하는 방식이 무조건 1.2.3 숫자만 있을까?

그리고 만약 중간 순서부터 표기하고 싶다면...????

당연히!!! 방법이 있다!!!

예시와 함께 보는게 이해가 더 쉬우니 일단 예시부터 띄우겠다.

----------------------------------------------------------------------------------

</ol>

-----------------------------------------------------------------------------

딱 보니 뭐가 뭔지 감이 오....온다...!

type 은 순서표기 방법을 지정해주고 start는 순서를 시작하는 번호인걸 알 수 있다!

그리고 둘다 <ol> 태그의 속성으로 쓰였다는것!

일단 숫자로 표기하는걸 올렸는데 밑에 코드 전문에 쓰여있는 주석을 보면 로마자 대소문자, 알파벳 대소문자로 표기하는 방법을

알 수 있다.

참고바람

-------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<!-- 순서가 있는 목록

Type 설명

--------------------

type = "1" 숫자(기본값)

type = "a" 영문 소문자

type = "A" 영문 대문자

type = "i" 로마숫자 소문자

type = "I" 로마숫자 대문자

-->

</ol>

</body>

</html>

--------------------------------------------------------------------------------------

<코드 전문>

9. <blockquote></blockquote> : 들여쓰기를 해주는데 보통 인용문을 표시할 때 쓰는 태그라고 한다. 그런데 많이 안쓸듯...ㅎ

10. <strong></strong> : 텍스트를 굵은 글씨로 강조해준다.

잠깐!!!!! 글씨를 굵게 해준다고?? 그럼 아까 본 <b> 태그랑 다를게 뭐야아아아아앍!!!

라고 할 수 있겠으나 다르다!!!

나는 바로 여기서 프로그래머도 따듯한 가슴을 갖고 있다는 걸 느꼈다...!!

<b>태그와 <strong> 태그의 차이점은 바로 "시각장애인분들을 위한 화면 리더기"에서 다르게 읽힌다....!!!

<strong> 태그는 말그대로 !!!!강조!!!! 하는 것이기 때문에 리더기가 강조한다는 것을 알려준다.

11. <a></a> : 요 태그는 텍스트나 이미지에 미리 설정한 페이지로 이동하도록 기능을 부여해주는 역할이다.

그리고 링크를 연결해주는 속성을 꼭!!!! 써야한다. 바로 예시코드...!

-----------------------------------------------------------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<h1> 여기는 메인 페이지입니다.</h1>

<b>네이버로 이동하려면 클릭하세요~</b>

</a> <br><br>

</body>

</html>

-------------------------------------------------------------------------------------------------

짜잔 <a href="이동시킬 주소"> 이렇게 쓰면된다 주소만 맞게 썼다면...! 이동시켜주는 링크가 생성된다.

나중에 요 링크를 이미지나 다른걸로 꾸며서 맹글어주면 아주~~ 그럴듯해 보일지도...?ㅎㅎㅎ

여기까지가 오늘 수업이다.

오전은 ot를 하고 오후에 느릿~하게 수업을 했는데도 정리하는데만 1시간이 넘게 걸렸으니

내일은 정리하는데 얼마나 걸릴지 둑흔둑흔 하다ㅎㅎㅎ

----오늘의 과제----

1. 영화소개 페이지 만들기

(메인페이지, 영화소개하는 페이지 4개, 각 페이지로 이동하는 기능이 있어야 함, 각 페이지에서 메인화면과 다른 영화소개로 이동하는 기능이 있어야 함)

2. 동기들과 식사하기

3. 시맨틱 태그에 대해서 조사ㅡ 빈번하게 쓰이는 시맨틱태그에 대해서 조사, 내일 랜덤으로 발표

table

tr
td
th
caption에 대해서 정리해오기

4. 블로그정리

728x90

'블록체인기반 SW 개발자 과정(feat.경일게임아카데미)' 카테고리의 다른 글

<JAVASCRIPT> 22.05.23일 6일차 기록 / 자바스크립트의 기본, 연산자 / switch 조건문 형식 (0)	2022.05.23
<JAVASCRIPT> 22.05.20 5일차 기록 / 자바스크립트의 기본 / 자바스크립트의 자료형 (0)	2022.05.20
<HTML> 22.05.19 4일차 기록 - 2 / 컨텐츠(요소) 가로로 배치하기 display : flex 와 float의 차이, 브라우저 창에 빈틈 없이 컨텐츠 붙이기 (0)	2022.05.20
<HTML> 22.05.19 4일차 기록 - 1 / 각 요소의 크기를 계산해서 설계해야하는 이유 (feat.영화 포스트) (0)	2022.05.19
<HTML> 2022.05.17 2일차 기록 / <colspan> <rowspan> <style> <th> <tr> <td> (1)	2022.05.17

공부 내용을 정리, 기록 하는 블로그

<HTML> 2022.5.16 일 1일 차 기록