HTML/CSS_004. 그밖에

다른 대부분의 웹 브라우저도 마찬가지지만, Chrome웹 브라우저에서는 '개발자 도구'를 지원합니다. 개발자 도구를 사용한다면 현재 보고있는 웹 페이지의 html코드를 볼 수 있습니다. 우클릭했을때 컨텍스트메뉴의 '페이지 소스 보기'를 클릭하여 html코드를 볼 수 있으며, 그 아래의 '검사' 혹은 'F12'키를 눌렀을 때에도 현재 페이지의 html코드를 볼 수 있습니다. 이 기능을 이용하게 되면 html코드는 물론, 이 태그는 어떤 태그이며, 왜 이런식으로 사용을 하는지. 또는 이 태그를 사용하면 이렇게 되겠구나 라는것을 어느정도 유추할 수 있음은 물론, style란을 선택하게되면 해당하는 웹페이지의 특정 태그에 어떤 css의 코드가 적용되어 이런 모양을 가지게 되었는지를 확인 할 수 있습니다. 네트워..

• format_list_bulleted 언어/HTMLCSS
• · 2020. 3. 28.
• textsms

HTML/CSS_003. 정보로써의 HTML

초창기의 HTML은 단지 웹 페이지를 보여주고, 하이퍼링크를 통해 다른 웹페이지와 연결을 해주는 언어였습니다. 이후 HTML이 정보를 표현하고, 담아내는 것에 집중하도록 하기 위해, 관련된 여러가지 조치들이 생겨나게 되었습니다. 우선 시각적인 부분에서의 조치입니다. 이전의 HTML의 첫번째 포스팅에서 HTML의 태그에는 시간이 지나 의미가 변하거나 퇴출된 태그가 있다고 했었습니다. 라는 태그 역시 퇴출된 태그중의 하나이며, 사용하지 않도록 권고되고 있지만 아직 사용하는 사람이 많이 있기때문에 알아두어야 하는 태그로써 강좌에는 소개되었습니다. 태그는 size속성을 통해 1~7의 값을 입력함으로써 글의 크기를 지정가능하며, color속성을 통해 해당 글의 색상을 변경시키는 태그입니다. 하지만 이러한 태그들은..

• format_list_bulleted 언어/HTMLCSS
• · 2020. 3. 24.
• textsms

HTML/CSS_002. HTML의 FORM

이번 포스팅에서는 HTML에서의 FORM을 위주로, 자주 사용하는 태그들과, 그 태그들을 사용했을 때 어떻게 작동되는지를 정리해 보려고 합니다. #1. paragraph. 단락입니다. 줄바꿈과 여백을 통해 단락을 구분하게되며, 더 간격을 넓히고자 할 때엔 을 추가하거나 css를 사용해야 합니다. #2. A forced line-break. 줄바꿈입니다. 내용이 없는 태그(void element)이기 때문에, 시작태그 하나만 있으면 사용 할 수 있습니다. 은 시각적으로 띄워줄 뿐이며, 단락을 나타내고자 할 때에는 태그를 사용해 주는게 좋습니다. #3. 웹 페이지에 img를 포함하는 방법입니다. 꼭 태그를 닫을 필요는 없으며, src속성을 사용하여 포함하고자 하는 파일의 이름을 지정합니다. 기본적으로 src..

• format_list_bulleted 언어/HTMLCSS
• · 2020. 3. 23.
• textsms

HTML/CSS_001. HTML이란?

우선, HTML/CSS를 주제로 하는 포스팅은 생활코딩의 동영상강의를 기반으로 정리했습니다. HTML(HyperText Markup Language). HTML을 단어 단위로 보면 아래와 같습니다. HyperText - Webpage의 Link와 같은 기능을 뜻하며, Markup - Markup이라는 형식을 가진 Language - 언어입니다. 통합한다면, HyperText를 가장 큰 특징으로 하는 Markup언어입니다. 생활코딩의 강좌에서는 프로그래밍 언어라고 소개를 하며 강의를 진행하지만, 예전부터 어디선가 들려오는, HTML은 프로그래밍 언어가 아니라는 소리를 들어와서 찾아보니... https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_..

• format_list_bulleted 언어/HTMLCSS
• · 2020. 3. 20.
• textsms