<생활코딩 - WEB - WEB1 - HTML & Internet>
1. 기본 문법 - 태그
1 단어 앞 뒤로 열린 태그와 닫힌 태그를 달아준다. (닫힌 태그는 슬래쉬로 표현한다.)
1) <strong>: “앞으로 작성되는 언어가 중요하다”는 뜻으로 단어를 볼드체로 강조한다.
2) <u>: “underline의 축약어”로 단어에 밑줄을 쳐준다.2 태그 용어는 유사한 성격의 영단어를 비유적으로 사용한 것이다.
2. 혁명적인 변화
1 가장 많이 사용되는 것이 중요도가 높은 경우가 대다수임.
2 태그를 배우고 나니 내 상태가 ‘무엇을 모르는지도 모르는 상태’에서 ‘무엇을 모르는지는 아는 상태’가 됨
3 따라서, 새로운 태그를 맞닥뜨렸을 때 직접 검색해서 알아볼 수 있음. (사이트 참고: https://www.w3schools.com/tags/tag_hn.asp)
1) 검색 요령
1 예제를 보고, 직접 실험하며 유추 및 추론해 봄.
2 정의를 보고 내 추론을 확증함. 4 <h1>~<h6>: heading이라는 뜻으로, 제목을 표현할 때 쓰임. 1부터 6까지 순서대로 제목 크기가 달라짐.5 기계가 많은 일을 해주는 시대이기 때문에, 사람이 기초만 알고 있어도 할 수 있는 것이 많음. 빠른 속도로 발전이 가능함 :-)
3. 통계에 기반한 학습
1 www.advancedwebranking.com/html 사이트에서 빈도수가 높은 태그들을 볼 수 있음. 전 세계의 웹사이트들은 대게 26개 정도의 태그를 사용하여 만들어졌음.
2 빈도수가 높은 태그나 언어는 다른 단어와 뜻을 결합해서 새로운 정보를 나타내게 해주는 것임.
3 지금까지 배운 것, 존재한 것을 바탕으로 새로운 것이 탄생할 수 있음. 그렇기 때문에 사람들이 많이 사용한 것, 기존에 있었던 것은 중요한 것들임.
4. 줄바꿈
1 <br>: 닫힘태그 없이 줄만 한 칸 띄워주는 태그. 반복하는 만큼 한 줄씩 더 띄워짐
2 <p></p>: 단락을 나눠주는 태그. 단락을 나누었다는 정보를 주기 때문에 태그보다 더 사용가치가 있다. 그러나 html만 사용해서는 단락 간격을 조절할 수 없다는 한계가 있기 때문에, 이를 CSS 언어로 극복한다.
1) CSS 언어 중 [style="margin-top:20px”]라는 언어를 사용해서 정교하게 단락의 크기를 조절할 수 있다. (예_<p style="margin-top:20px">)- 여기까지 공부하고 든 느낌 -
재미난 것(코딩)을 하면서 카페에 여유롭게 있으니, 살 맛이 난다. 인생을 통틀어 크게 행복하고 즐거워서, 평생 이렇게 살고 싶다는 생각이 든다.
특히 줄 바꿈을 실험하면서 코딩을 작성해서 웹페이지를 만들 때는 너무 재밌어서 눈물이 났다.(ㅋㅋ) 이 즐거움에 감동을 받았는지 마음이 간질간질하기도 했다.
나는 내가 생각한 것보다도 더 코딩이 잘 맞는 사람인가 보다. 꼭 재미있는 과학실험을 하는 것 같다. 강의에서 알려준 대로 새로운 태그를 혼자 검색해 미리 실험하며 결과를 볼 때는, 내가 꼭 세상을 창조할 수 있는 사람인 것처럼 원대한 포부와 벅찬 감정이 인다.5. HTML이 중요한 이유
1 블로그 같은 사이트에 ‘글’을 쓸 때도, 우리는 HTML source를 만들고 있다. 그 소스가 검색엔진을 통해 노출될 때, 아래의 두 경우는 노출 정도에 큰 격차를 보인다. 겉으로 볼 때 두 글자 ‘coding’은 거의 똑같은 모습이다. 검색엔진에서 노출이 되지 않는 정보는 사람들에게 공개되지 않아 나눌 수 없는 정보이다.
1) <strong><span style="font-size22px;">coding</span></strong>
2) <h3>coding</h3> 2 HTML은 사람들이 조건 없이 편리하게 이용할 수 있도록 고안되어 탄생한 컴퓨터 언어이다. 그렇기에 접근성이 뛰어나, 시각 등에 장애가 있는 사람들도 청각화 같은 단계를 거쳐 차별 없이 편리하게 정보에 접근할 수 있다는 장점이 있다. 웹이 다른 기술과 다르게 특별한 점은 이런 점이다.
3 HTML을 의미론적으로 잘 사용해서, 비즈니스 면뿐만 아니라, 휴머니즘 면에서도 선한 영향력을 발휘할 수 있게끔 해야겠다.
7. 최후의 문법 속성과 img
1 <img>: 웹페이지에 이미지를 구현할 수 있다.2 속성(attribute)
1) <src="">: source의 축약어로 이미지를 불러온다.
1 “” 사이에 ~~~.jpg 명을 입력하면, 내 컴퓨터에 저장된 이미지가 웹페이지에 구현된다.
2 “” 사이에 이미지의 웹주소를 입력하면, 내 컴퓨터에 사진이 없더라도, 그 주소에서 이미지를 불러와 내 웹페이지에 구현해준다.
2) <width="" height="">: 사진 사이즈를 조절하는 ‘속성’이다. 숫자를 쓰면 픽셀 단위로 계산되고, 숫자와 %를 함께 쓰면, 웹페이지 사이즈에 자동으로 맞춰 꽉 차게 나타나도록 계산된다. (width와 height, 둘 중 하나만 써도 된다.)
- 여기까지 공부하고 든 느낌 -
이미지파일 삽입 명령어(< img src="howth.jpg">)를 기입하고 웹페이지를 새로고침 했는데, 이미지가 나타나지 않았다. 언어를 한 글자씩 꼼꼼히 보고 몇 차례나 시도해봤는데, 그래도 이미지가 나타나지 않았다. 갑자기 너무 답답하고 기분이 안 좋고 짜증이 나기 시작했다.(미칠듯한 기분이었다.)
그러다 웹 검색을 해보면서, 다른 사람이 작성한 코딩을 복사해서 붙여넣기 하고, 이미지 파일 이름만 내가 갖고 있는 것으로 바꾸니 짜잔 하고 이미지가 나타났다!! 급 기분이 좋아지면서 재채기하고 난 후처럼 시원한 마음이 들었다.
그동안 나는 항상 내 기분을 좋게 하기 위해 노력하며 살아왔다. 아직 그 방법을 찾지 못해 계속 고뇌했는데, 코딩에서 그 방법을 찾았다.
그런 의미에서 코딩하다가 막히는 일이 생기는 건 아주 좋은 일이다. 그걸 풀어서 원하는 결과를 내면, 내 즐거움을 직접 만들 수 있으니까! XD