생활코딩 - <Web> 10~11 : 코딩(coding) 실습하기, 일반인과 코딩을 배운 지식인의 차이점, HTML 의 중요성, 속성(Attribute) 이해하기, 인기 있는 태그 img (이미지 넣기)
생활코딩 <Web> 공부
생활코딩. web과 HTML
10 ~ 11 학습정리내용입니다.
10) html (html이 중요한 이유)
누구나 기초가 중요하다고 말한다.
하지만 기초가 중요하다는 말을 잘 들어보면
응용으로 가는 과정으로서 기초가 중요하다는 뜻인
경우도 많이 있다.
사실 기초는 기초만으로도 할 수 있는 일이 많다.
우리는 웹사이트를 만든다는 거대한 목표를 향해서
나아가고 있지만, 지금까지 우리가 배운 것은
그런 큰 목표가 아니더래도 이것 자체로 쓸모가 많다.
이번 10강에서는 여기까지 배운것만으로
할 수 있는 일을 하나를 소개해준다.
위 화면은 https://opentutorials.org 라는 사이트인데
우리가 실습하고 있는 예제의 미래 모습이다.
이렇게 글 쓰는 화면에는 블로그, SNS 등이 있는데
우리가 글을 쓸 때 내부적으로 어떤 일이 일어나는가를 살펴 볼 수 있는 기회이기도 하고
일반인이 글을 쓸 때와 우리처럼 코딩에 대해 배운 사람들이,
지식인들이 글을 쓸 때에는 어떤 차이가 생기고 이것이 미래에 얼마나 큰 차이를 가져오는지를
한 번 생각해보는 시간으로 보도록 하자.
일반인이 일반적으로 글을 쓸때처럼
coding 이라고 위에 입력하고,
지식인이(코딩을 배운 사람) coding 이라고
아래쪽에 글을 쓰고
이 두 사람이 이 coding 이라는 글을 제목으로
수정할때의 차이점이 어떠한가를 가정해보겠다.
위에 글을 쓴 일반인의 경우에는
"coding" 을 드래그해서 선택한 후,
글의 크기를 먼저 정할 것이며
글의 굵기를 선택해서 진하게 표시할 것이다.
이렇게 해야 제목처럼 보이기 때문이다.
반대로 아래 글을 쓴 지식인의 경우
format 이라는 카테고리에서
제목 글씨가 예시로 나와있는 항목중에
적당한 제목크기의 사이즈를 찾아 눌러준다.
이랬을 경우 위 일반인이 쓴 coding 과
아래 지식인이 쓴 coding 의
두 글씨와 사이즈로 보기에는 눈으로 봤을 때
별 반 차이가 없음을 알 수 있을 것이다.
카테고리 중 source 라고 되어 있는 항목을 클릭하면
이렇게 코드내용이 적힌 화면이 나오는데
이는 편집이기를 이용해서 글을 쓴다는 것,
컨텐츠를 만든다는 것 등이 내부적으로
HTML 코드를 생산하는 행위였다.
라는 것을 알 수 있다.
우리가 HTML을 몰라도
사실 우리는 HTML을 만들어내고 있었던 것이다.
다시 돌아와서
일반인의 제목과 지식인의 제목 사이에는 차이가 있다.
지식인의 제목은 보시다시피 깔끔하다.
그리고 제목이 < h3 > < / h3 > 라는 태그로 감싸져 있기 때문에
어디서부터 ~ 어디까지가 세 번째로 중요한 제목이다, 라고 하는 정보가
태그(코드)상에 나타나있다.
반대로 일반인이 작성한 제목에는,
앞뒤로 srtong 이라고 하는 정보가 아닌,
그냥 진하게 표시한다는 태그와
중간의 font-size:22px 이라는 CSS 라는 언어로
디자인적으로만 꾸며져 있는 것을 볼 수 있다.
위 일반인이 적은 글과 새로 적은 글은
둘 다 같은 동급으로 여겨진다.
이는 글의 형식이 차이가 없다는 뜻이다.
아래 지식인이 적은 글은 < h3 > 라는 태그가 들어간 형식의 글이기 때문에
위의 텍스트와 아래 텍스트는 완전히 격이 다른 글이라고 할 수 있다.
일반인이 쓴 글의 형식 VS 지식인이 쓴 글의 형식
을 위 화면으로 보았을 때,
검색엔진을 통해 이의 차이점을 쉽게 알아낼 수 있는데
" coding " 이라고 검색했을 때 더 상위 페이지 항목에 제목으로 노출되어 나오는 사이트는
오른쪽의 태그가 포함된 형식의 coding 글이 나올 확률이 매우 높다.
왼쪽의 일반인이 쓴 시각적으로만 제목처럼 보이는 coding 이라는 글이 있는 사이트는 100페이지 뒤까지 찾아봐야 겨우 나올 수도 있다.
오늘날 현대사회에서 검색엔진이 차지하는 위상은
너무나도 크기 때문에
검색엔진에 노출이 되지 않는다는 것은
=실질적으로(현실적으로) 존재하지 않는다.
라는 의미를 갖는다.
우리가 웹을 만들면서 화려하게 만들고 싶고
더 편리하게 만들고 싶고, 여러 욕심이 생기겠지만
훨씬 더 중요한 것은 바로 웹이 갖고 있는
본래의 의미, " 정보 " 라는 것을 탄탄히 하는 것이 훨씬 더 중요한 이슈가 될 수 있다.
경우에 따라서는
문서를 예쁘게 보이게 하기 위해서
이미지로 글을 쓰는 경우가 많이 있다.
그러나 이렇게 할 경우 검색엔진에는 존재하지 않는 페이지가 된다.
HTML을 의미에 맞게 정확하게 사용한다는 것은
비즈니스적인 측면에서 생명줄과 같이 중요한 문제라는 것을 우리는 인지해야 할 필요가 있다.
HTMl이 중요한 또 하나,
웹의 핵심적인 철학은 접근성이다.
"웹은 모든 운영체제에서 동작하고
웹 페이지의 소스코드는 누구나 볼 수 있고
웹은 저작권이 없는 순수한 공공재이다.
바로 이것들이 웹을 다른 기술들과 구별되는 특별한 기술로 만드는 것이라고 생각한다." (강사의견)
이러한 개방성을 접근성, 영어로는 accessibility 라고 한다.
웹이 중요하게 생각하는 접근성 중에 하나는
신체적인 장애가 있는 분들도 정보로부터 소외되지 않도록 노력해야 한다는 것이다.
예를 들어 시각장애가 있는 분들은 시각적인 정보를 청각화해서 정보를 접하게 되는데
'스크린 리더' 라는 프로그램이나,
각종 보조장치를 이용해서 정보를 접하게 된다.
그런데 웹페이지를 만들때 웹페이지를 예쁘게 만들고 싶다는 생각에서
문자까지 통으로 이미지로 만든다면 시각장애가 있는 분들에게는 존재하지 않는 정보가 된다.
시각장애인을 배려하지 위한 여러가지 기술과 테크닉이 있으나,
그 중요한 첫 출발은 HTML의 태그를 정확히 알고 의미에 맞게 사용하는 것이다.
우리가 이렇게 한다면 우리도 모르게 누군가에겐 큰 도움을 줄 수 있는 것이다.
이렇게 HTML은 비즈니스적인 측면에서 중요할 뿐만 아니라 휴머니즘적인 측면에서도 매우 중요한 기술이라고 볼 수있다.
11) 속성 이해하기 + 이미지 (최후의 문법 속성 & img)
지금까지 우리는 html의 가장 중요한 문법인 '태그'를 배워보았다.
이번 시간에는 '속성' 이라고 하는 태그의 심화된 문법을 배울 것이다.
+인기 있는 태그 img 도 같이 배워보자.
다음은 왼쪽의 웹페이지 화면과
오른쪽 코드편집프로그램 화면이다.
글만 있으니 뭔가 답답해보인다.
어떤 이미지를(사진을) 웹 페이지에 포함시킬 때 사용하는 태그의 이름은 < img > 이다.
*img 는 image 의 줄임말이다.
코드편집화면의 내용 중간에 < img > 라고 적고
웹 페이지를 새로고침 해보니, 아무것도 바뀌지 않았다.
이유는, 그냥 < img > 라는 태그만 입력하면
어떤 이미지를 보여줄 건지에 대한 얘기가 없기 때문이다.
이처럼 태그의 이름만으로는 정보가 부족할 때가 있는데, 태그라는 문법을 만든 컴퓨터 공학자들은
이를 인식하고 새로운 문법을 출현시키게 된다.
어떤 이미지인지를 알려주기로 약속된 속성이
바로 source 이다.
공학자들은 이대로 사용하기엔 용어가 길기 때문에 " src " 로 줄여서 쓰기로 하였다.
그리고 " " 따옴표 안에 우리가 원하는 이미지의 주소를 입력해주면
웹브라우저가 적혀있는 주소를 저 위치에 이미지로서 표현해주게 된다.
(강사추천사이트) https://unsplash.com/
먼저 이미지를 가져오기 위해서
저작권없는 무료 이미지 사이트에 접속한다.
coding 이라고 입력 후
연습으로 사용할 이미지 하나를 고른 뒤
파일을 저장해주는데
저장경로는 바탕화면에 만들었던
web 폴더안에 저장해준다.
파일명은 coding 으로,
이름 뒤에 .jpg 이미지 파일 형식을 같이 입력해준다.
-> coding.jpg
그런다음 따옴표 형식 안에 파일명을 입력해준다.
< img src = " coding.jpg " >
Ctrl + S 로 저장.
웹페이지에서 나오는 이미지의 사이즈가 엄청 큰 상태인 것을 볼 수 있는데, 사이즈를 조정하기 위해
뒤에 width = "450" 이라고 입력해주고 저장 후 새로고침 해본다.
사이즈가 그래도 크게 나온다면 입력값에 100% 로 입력하자.
웹 페이지에 보여지는 이미지가 자동으로 100% 크기에 맞게 사이즈가 맞춰지게 된다.
< img > 태그를 통한 속성이라는 문법 정리
속성
위의 src="coding.jpg" 와 width="100%" 을
우리는 속성(Attribute) 이라고 부른다.
그리고 src="coding.jpg" 와 width="100%" 는
누가 먼저 앞쪽에 써져 있고 없고 위치의 상관이 없다.
태그가 태그의 이름만으로는 정보가 부족할 때
이러한 속성을 통해 더 많은 의미를 부가할 수 있다.
