HTML (12) 썸네일형 리스트형 #7. HTML 문서에서 CSS를 로드하는 두 가지 방법 CSS 파일을 HTML에서 로드하기 위해서는 1) link 태그와 2) @import 사용하는 방법 두 가지가 있습니다. 1) link 태그 Hello 2) @import **주의해야 할 점 common1.css 파일부터 common4.css 파일까지 총 4개의 파일이 있다고 가정해보겠습니다. 첫번째 사례로 주어진 index.html은 독립적인 common*.css 파일들을 불러옵니다. 이것은 병렬방식으로 common1.css 파일부터 common4.css 파일까지 거의 동시에 읽어옵니다. 따라서 한 파일을 읽는데 1초가 걸린다고 가정하더라도 1초정도면 4개의 모든 파일을 불러올 수 있습니다. Hello 반면 아래와 같이 common1.css 는 common2.css를 import하고, common2.c.. [첫번째 Project] :: 반응형 Nav Bar 만들기 2. # 오늘은 지난번에 만들었던 HTML에 CSS를 덧붙여 Nav bar를 꾸며보도록 하겠습니다. # CSS에서 색깔을 변수로 사용하는 방법과 Item 배치하는 방법에 대해서 알아보도록 하겠습니다. # Item 배치를 공부하시고 싶은 분은 "FlexBox" 와 "Display & Position" 을 공부해보시기 바랍니다. # Visual Studio Code 및 Extension 설치 방법 1) 현재 상태 지금까지 작성한 HTML을 확인해보면 왼쪽과 같은 모양인 것을 확인할 수 있습니다. 우리는 이제 CSS를 활용해 왼쪽을 오른쪽의 모습으로 바꾸도록 하겠습니다. 2) 전체 HTML 아래 과정을 진행하기 전에 CSS 파일을 HTML에 불러와서 사용해야합니다. 그 방법을 간단히 설명드리도록 하겠습니다. 1. .. #7. HTML5에서 추가된 다양한 타입의 input 요소 # HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같습니다. # datalist 요소, keygen 요소, output 요소 # 각 요소들의 특징과 사용방법에 대해서 알아보도록 하겠습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML에서 추가된 다양한 타입의 input 요소 1) datalist 요소 datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소입니다. 사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 됩니다. 단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결됩니다. 2) keygen 요소 keyge.. #5-2. HTML 테이블(table) 만드는 방법 # HTML에서 테이블(table)을 만드는 방법을 소개합니다. # 테이블의 구성요소와 열을 합치는 방법, 행을 합치는 방법 등을 소개합니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 테이블(TABLE) 1) HTML 테이블(table)이란? 테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 태그를 사용하여 이러한 테이블을 작성할 수 있습니다. 태그의 구성은 다음과 같습니다. 1. 태그는 테이블에서 행을 구분 2. 태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨가 적용되고 정렬은 가운데 정렬 3. 태그는 테이블의 열을 각각의 셀(cell)로 나누어 줌 CSS의 border.. #5-1. HTML 리스트(list) 만드는 방법(ul, ol, dl) # HTML 에서 리스트(list)를 만드는 방법을 설명한다. # HTML 리스트(list)에는 세 가지 방법이 있습니다. # 1) 순서가 없는 리스트(unordered list) :: # 2) 순서가 있는 리스트(ordered list) :: # 3) 정의 리스트(definition list) :: # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 리스트(List) 리스트를 만들 때 한 가지 팁이 있는데, 리스트를 만들 때 "Tap" 키를 활용하는 것입니다. 이 방법은 프론트 개발자들의 피로도를 줄여줄 수 있는 조그만한 팁이라고 할 수 있습니다. 아래와 같은 리스트를 만든다고 가정을 했을 때, 손으로 작성하는 코드의 양을 줄일 수 있습니다. 1) 순서가 없는 리.. #4-2. HTML 배경(Background) 설정 방법 # HTML 문서의 기본 배경은 흰색입니다. # 또한, HTML 요소들도 각자 자신만의 배경을 가지고 있습니다. # 이번 "HTML 배경(Background) 설정 방법"편에서는 HTML의 배경을 변경하는 방법에 대해 설명합니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 배경(Background) HTML에서는 이러한 배경을 다음과 같이 변경할 수 있습니다. 1. 배경을 다른 색으로 변경 2. 배경을 다른 이미지로 변경 위의 두 가지 방법을 아래에서 하나씩 배워보겠습니다. 1) 배경을 다른 색으로 변경 HTML5 이전까지는 bgcolor 속성을 이용해 HTML 요소의 배경색을 다른 색으로 변경할 수 있었습니다. 하지만 HTML5 부터는 bgcolor 속성.. #4-1. HTML 스타일(style) 속성 # 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정이 가능합니다. # 하지만 이러한 style 속성을 이용한 방법은 오직 하나의 HTML 요소에만 스타일을 적용할 수 있습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 스타일(style) 속성 1) 문법 2) 배경색 변경 style 속성을 이용한 배경색 변경 3) 글자색 변경 style 속성을 이용한 글자색 변경 4) 글자 크기 변경 style 속성을 이용한 글자 크기 변경 5) 문단 정렬 변경 style 속성을 이용한 문단 정렬 변경 6) 여러 스타일 설정 style 속성값에 사용되는 CSS 속성과 속성값들은 세미콜론(;)을 이용하여 구분 CSS 속성을 하나만 사용할 때나, 여러 개의 CSS .. #3. HTML 공간 분할 요소:: iframe과 HTML 레이아웃(layout) # HTML의 모든 요소는 해당 요소가 Web browser에 어떻게 보이는가를 결정짓는 display 속성을 갖습니다. # 오늘은 ifame과 HTML의 레이아웃(layout)을 알아보겠습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. iframe 요소 1) iframe 요소 iframe이란 inline frame의 약자입니다. iframe요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹페이지를 삽입할 수 있습니다. 문법: iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다. 또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정되어 있습니다. 2) iframe 요소의 테두리 변경 iframe 요소는 기.. #2. HTML 공간 분할 요소:: 블록과 인라인(Block, Inline) # HTML의 모든 요소는 해당 요소가 Web browser에 어떻게 보이는가를 결정짓는 display 속성을 갖습니다. # 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. # 블록(Block)타입의 요소와 인라인(Inline)타입의 요소입니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. 블록(block)타입의 요소 1) 블록(block)타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. p요소는 display 속성값이 블록인 .. #1. HTML TEXT(텍스트) 요소 # tag 목록을 볼 수 있는 페이지로 이동합니다. # HTML의 TEXT 요소를 확인합니다. # box 하단에는 사용된 예시를 보여줍니다. AXCE 의 BLOG 미리보기 굵은 글씨 입니다. 굵은 글씨 강조 입니다. 이탤릭체 입니다. 이탤릭체 강조 입니다. 하이라이팅 효과 입니다. "이부분"을 삭제합니다. "밑줄 친 부분"입니다. X2 + Y2 = Z2 H2O 이 글은 짧은 인용구를 위한 글입니다. HTML 정의 블록 인용구 1 블록 인용구 1-1 블록 인용구 2 HTML5 정의 대전광역시 서구 복수서로 10 이전 1 2 다음
