코린이의 생활코딩 WEB1 - 10~12

10. HTML이 중요한 이유

기초가 중요하다

기초로도 할 수 있는 일이 많다.

배운 것만으로도 할 수 있는 일을 배워보는 시간

 

https://opentutorials.org 예제 사이트

우리가 글을 쓸 때 내부적으로 어떤 일이 일어나는지 볼 수 있는 것 → source

 

일반인과 지식인이 coding이라는 제목을 만들 때

*일반인

<p><strong><span style="front-size:22px;">coding</span></strong></p>

*지식인

<h3>coding</h3>

일반인의 제목과, 지식인이 쓴 제목과 격이 다르다.

◼︎ 검색엔진으로 비교한다면, 사용자가 coding 를 검색할 때, 제목이 coding 인 사이트와 글 내용이 coding 사이트 중

     검색엔진은 제목을 앞으로 빼어 보여주게 된다. 이 때문에 정보를 탄탄히 해주는 것이 중요하다.

◼︎ 또한, 문서를 예쁘게 하기 위해 이미지를 글로 작성하게 되면 검색엔진에게는 존재하지 않는 페이지가 된다.

→ html을 정확하게 사용하는 것이 중요하다

 

웹 핵심 철학 : Accessibility 접근성, 개방성

web 모든 운영체제에서 동작하고,  웹 페이지의 소스 코드는 누구나 볼 수 있고, 웹은 저작권이 없는 순수한 공공재

→ 다른 기술들과 구별되는 특별한 기술로 만드는 특징

★웹이 중요하게 생각하는 접근성 중 하나★

: 신체적인 장애가 있는 사람도 정보로 부터 소외되지 않도록 노력해야 한다는 것

예) 시각장애 : 시각에 대한 정보를 청각화하여 정보를 접하게 됨

                      웹페이지를 만들 때 예쁘게 만들고 싶어서 문자까지 통으로 이미지화 한다면 시각장애인은 존재하지 않는 정보가 됨

시각장애인을 위한 여러가지 기술과 테크닉이 있으나, 중요한 첫 출발은 HTML tag 를 정확히 알고 의미에 맞게 사용하는 것

이렇게만 한다면 우리는 우리도 모르게 누군가에게 큰 도움을 주고 있는 것이다.

 

11. 최후의 문법 속성 & img

이미지를 웹 페이지에 포함시킬 때 사용하는 tag = img

tag이름만으로 정보가 부족할 때가 있음

<img source> : 어떤 이미지인지 알려주기로 약속된 소스

<img src="(원하는 이미지의 주소)">

 

무료 이미지 사이트 : Unsplash https://unsplash.com/

저작권에 구애받지 않고 사용할 수 있는 사이트

 

파일저장 시 작업하고 있는 웹1 디렉토리로 다운 받은 이미지 저장하기

다운로드 받은 이미지 프로젝트 폴더에 저장

이미지 이름 바꾸기 : 마우스 오른쪽 커서 → rename

►원하는 이미지의 주소인 coding.jpg 입력

    이때 이미지의 크기 조정 <img src="coding.jpg" width="450">

    

<img src="coding.jpg" width=100%">

속성 : Attribute

위치는 상관 없음, tag가 tag의 이름만으로 정보가 부족할 때 

속성을 통해 더 많은 의미를 부과할 수 있게 된다. 

사실 어제의 완성작, 자료가 다 날라가버려서 다시 듣는 이야기

12. 부모자식과 목록

<parent>

       <child></child>

</parent>

tag가 포함관계로 있을 때 부모 tag 포함된 tag 자식 tag

HTML에 있는 tag들은 서로 부모 자식관계가 바뀜

어떤 tag들은 자식이 있는 곳에 항상 부모가 있고,

부모가 있는 곳에 항상 어떤 특정한 tag가 있는 아주 사이가 좋은 tag들이 있다.

 

목차 완성하면서 부모자식 관계 태그 살펴보자

html이 있는 제목 위에다 목차를 써보게따

줄바꿈<br> 사용 → 어색함

목차를 쓸 때 tag를 고안해 냈음

목차, 목록 list = <li></li>

 

*editor 3개 항목 동시 쓰기

command (나는 option) - 항목 클릭

여기에다가 참가자 이름을 써본다.

예) egoing, k8805, youbin

*이런 경우 목차 항목과 참여자 항목 분간이 잘 안 됨

 

이때, <li>의 부모인 <ul></ul>

이때, 지저분한 항목을 tab키를 사용하여 정리하면 깔끔해진다.

<li> 같은 항목들은 그 항목이 어디서부터 어디까지가 연관된 항목인지를 경계를 짓기 위한,

grouping을 하기 위한 부모 tag가 필요한 것임

따라서 <li>는 반드시 부모 tag를 갖고 있다. 그리고 부모 tag인 <ul>은 반드시 자식 tag 갖고 있다.

 

우리는 극단적 사고로 코딩 공부해야 한다. 충분히 불행할 때,

예제) 1억 개 항목 중에서 첫 번째 항목만 바꿔달라는 얘기를 전달 받았을 때,

         <ul> → <ol> 변환

자동으로 숫자가 매겨짐

"내용 추가해줘~" 하면 <li>GUMA</li> 항목을 더 추가하면 됨

 

<ol> 과 <ul> list의 약자

 Ordered List / Unordered List

 

*표를 작성하게 될 때 table은 3대가 같이 다님