본문 바로가기

Web16

[HTML] 웹페이지에 이미지, 사운드, 비디오 삽입하기 (img, audio, video) 웹페이지에 이미지, 사운드, 비디오를 삽입하는 멀티미디어 태그를 알아보겠습니다. [ Contents ] 1. 이미지 태그 img 태그는 이미지를 삽입하는 인라인 태그입니다. src 속성에 이미지 경로를 입력하고, width와 height 속성으로 가로 세로의 크기를 조정합니다. alt 속성값은 이미지가 나오지 않을 때, 대신 출력하는 문구입니다. 보통 이미지에 대한 설명을 alt 속성값으로 지정합니다. 이미지가 나오지 않는 이유는 대부분 '잘못된 경로' 때문이며, 이미지의 확장자(png, jpg 등)와 상대주소를 정확히 명시해야 합니다. 절대 주소로 해도 되지만, 폴더 계층구조가 바뀌면 모든 경로를 수정해야 하므로 대개 상대 주소로 적습니다. 루트 폴더는 html 파일이 있는 폴더이고, 보통 './src.. 2022. 5. 27.
[HTML] 테이블 td, th 셀 수평 수직 정렬하기 (왼쪽, 오른쪽, 위, 아래, 가운데 정렬) Table 태그에서 셀들을 수평 또는 수직으로 정렬하는 방법을 소개합니다. [ Contents ] 제목1제목2 내용1내용2 정렬을 알아보기 전에, 먼저 th와 td태그의 속성을 살펴봅시다. th 태그는 표 제목을 주로 나타내며, bold 체와 가운데 정렬이 기본값입니다. 반면 td 태그는 기본 셀로, 왼쪽 정렬되어 있습니다. 1. 셀 수평 정렬하기 Align 내용1내용2 align 속성을 사용하면 셀의 내용을 수평 정렬할 수 있습니다. 기본값인 왼쪽 정렬은 'left', 오른쪽 정렬은 'right', 그리고 가운데 정렬은 'center'입니다. 가운데 정렬을 가장 많이 사용하며, middle과 혼동하기 쉬우니 유의해야 합니다. 2. 셀 수직 정렬하기 Valign 내용1내용2 valign (vertical.. 2022. 5. 26.
[HTML] Table 표에 시맨틱 태그 사용해서 구조화하기 (caption, thead, tbody) 지난 시간에 Table 태그로 표를 만들고 행열을 병합하는 과정을 배웠습니다. 이번에는 시맨틱 태그를 사용해서 표를 구조화하는 방법을 알아보겠습니다. 2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 시맨틱 태그가 무엇이고, 왜 사용해야 하는지는 위 글에서 참조하실 수 있습니다. [ Contents ] 1. 표 제목 태그 표 제목 제목1제목2 내용1내용2 내용 caption 태그는 표의 제목을 달아줍니다. 표 제목 만약 표 제목을 아래에 달아주고 싶다면, css를 사용해서 bottom으로 변경합니다. 2. 제목 행 태그 표 제목 제목1제목2 내용1내용2 내용 thead 태그는 주로 1행의 th태그를 감싸줍니다. 표의 제목행을 나타내는 시맨틱 태그로, 별다른 .. 2022. 5. 25.
[HTML] 테이블 표, 행, 열 만들고 (<table>, <tr>, <th>, <td>) 행열 병합하기 table 태그를 이용해서 표를 만드는 방법을 알아보겠습니다. [ Contents ] 1. 기본적인 테이블 구조 제목1제목2 내용1내용2 내용1내용2 은 'table row'의 약자로 표의 가로 행을 나타냅니다. 태그 안에 한 행에 담을 셀을 넣을 수 있습니다. 는 'table header'의 약자로 표의 제목 셀을 나타냅니다. 주로 1행에서 column 명을 나타낼 때 사용하며, td 태그와 달리 bold 처리와 가운데 정렬이 되어 있습니다. 는 'table data'의 약자로 셀을 나타냅니다. td 태그를 추가하면 하나의 셀이 추가되며, 열이 길어지는 효과도 있습니다. 제목1제목2 내용1내용2내용3 내용1 만약 행마다 셀의 개수가 다르다면, 가장 많은 셀을 가진 행을 기준으로 표의 열이 결정됩니다. .. 2022. 5. 24.
[HTML] 블록, 인라인 시맨틱 태그: figure, details, summary, mark, time, meter, progress 시맨틱 태그는 크롤봇에게 단서를 알려주는 '주석'입니다. 문서의 구조(header, section, article, footer) 외에도 시맨틱 태그를 통해서 어떤 내용을 담고 있는지 알려줄 수 있습니다. 2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 웹 페이지의 구조를 잡을 때 사용하는 '시맨틱 태그'에 대해서 배워보겠습니다. [ Contents ] 1. 시맨틱 태그란? 시맨틱 태그(Semantic Tag): 문서의 구조와 의미를 전달하는 태그 시맨틱 태그는 웹 페 star7sss.tistory.com 시맨틱 태그에 대한 자세한 설명은 위 글을 참조해주세요. [ Contents ] 1. 블록 시.. 2022. 5. 11.
[CSS] 스타일이 적용되는 우선순위 (cascading, overriding) 한 태그에 여러 스타일이 적용될 때, CSS는 우선순위에 따라 스타일이 지정됩니다. 이러한 CSS의 캐스케이딩(cascading)과 오버라이딩(overriding)에 대해 알아보겠습니다. [ Contents ] 1. 스타일 캐스케이딩(Style Cascading)과 오버라이딩(Overriding) Cascading은 '위에서 아래로 흐르는' 또는 '상속하는'이라는 뜻을 갖고 있습니다. 하나의 태그에 다양한 스타일이 지정되었을 경우, CSS는 우선순위에 따라 하나씩 적용합니다. 맨 마지막에 적용되는 스타일이 가장 우선순위가 높으며, 해당 스타일로 덮어쓰게 됩니다. (또는 우선순위가 낮은 스타일은 무시되기도 합니다.) 2. 스타일 우선순위 1) 나중에 적용한 속성값의 우선순위가 높음 p {color: blu.. 2022. 5. 2.
[CSS] 스타일을 지정하는 5가지 방법 (타입/자손/클래스/아이디/가상클래스 선택자) CSS에서는 '선택자(Selectors)'를 통해 스타일을 지정합니다. 여기서 선택자는 'HTML의 어떤 요소에 CSS를 적용'할 것인지를 결정하며, 이 글에서는 스타일을 지정하는 5가지 선택자를 알아보겠습니다. [ Contents ] 1. 타입/태그 선택자 타입/태그(Type/Tag) 선택자: 특정 태그(HTML 요소)에 스타일을 정의할 때 사용 웹페이지 내 모든 특정 태그에 스타일을 적용할 수 있습니다. h2, h3 {color: red; font-size: 40px;} * {color: red;} 예를 들어, 위 css 코드는 웹페이지 내 모든 h2, h3 태그가 빨간색이고, 40px로 지정됩니다. 힌편, 모든 태그에 적용하고 싶은 스타일은 *(전체 선택자)를 사용해서 정의할 수 있습니다. 2. 자.. 2022. 5. 1.
[CSS] CSS를 적용하는 4가지 방법 CSS 스타일을 적용하는 4가지 방법에 대해서 알아보겠습니다. [ Contents ] 1. 인라인 스타일 시트 [inline] 직접 태그에 스타일을 적용하는 방법입니다. 통일성 및 가독성을 해치며 유지보수가 어렵기 때문에, 특수한 경우에만 제한적으로 사용합니다. star가 되고나서 star7sss.tistory.com 2. 전역 스타일 시트 [internal / embedded / global] 태그 {속성: 속성값;} head 태그 내에 style 태그를 이용해서, HTML 내의 전체 태그에 서식을 적용합니다. 전체 웹페이지에 적용되기 때문에 global 방식이라 부르기도 하고, head 태그 내에 스타일을 정의하기 때문에 embedded 방식이라고도 합니다. body 태그 내의 h2는 모두 빨간색이고.. 2022. 4. 30.
[CSS] 캐스케이딩(계단형) 스타일 시트란? CSS의 구성요소와 장점 CSS의 정의와 개요에 대해서 알아보겠습니다. [ Contents ] 1. CSS란? CSS(Cascading Style Sheet): 웹페이지의 레이아웃이나 스타일, 디자인을 정의하는 언어 HTML이 웹페이지의 내용이나 구조를 담당한다면, CSS는 웹페이지를 꾸며주는 '서식'입니다. CSS를 통해서 색깔이나 크기, 여백, 배치까지도 조정할 수 있습니다. 그런데 왜 '계단형' 스타일 시트일까요? 그 이유는 스타일이 '중첩'해서 적용 가능하며, 동일한 속성일 경우 '우선순위'에 따라 적용되기 때문입니다. 즉 우선순위에 따라 스타일은 계층적으로 존재하며, 우선순위가 높은 스타일부터 하나씩 적용됩니다. 이에 대한 자세한 설명은 추후 글을 통해서 서술하겠습니다. 2. CSS 구성 요소 선택자 { 속성1: 속성값.. 2022. 4. 29.

티스토리툴바