CSS 스타일 적용 우선순위는 다음과 같습니다: !important가 적용된 속성 인라인 스타일 (예: ) ID 스타일 (예: #my-id { color: blue; }) 클래스 스타일 (예: .my-class { color: green; }) 타입 스타일 (예: h1 { color: purple; }) 상위 요소의 스타일 예 Hello World #my-header { color: red; } .my-class { color: blue; } h1 { color: green; } 해당 h1 요소는 id 스타일의 color: red가 적용되므로 빨간색으로 표시됩니다.
인라인 스타일(inline style) 인라인 스타일은 HTML 요소의 style 속성을 사용하여 스타일을 지정하는 방법입니다. 이 방법은 다른 스타일 방법보다 우선 순위가 높아, 덮어쓰기가 쉽습니다. 하지만, 스타일을 수정하려면 모든 HTML 요소를 수정해야 하므로 유지 보수가 어려워집니다. 따라서, 인라인 스타일은 가능한 사용하지 않는 것이 좋습니다. 인라인 스타일은 다음과 같이 사용합니다. 인라인 스타일 위 코드에서 style 속성 안에 스타일을 지정하면 됩니다. 스타일은 속성 : 값; 형태로 지정하며, 여러 개의 스타일을 지정할 때는 세미콜론(;)으로 구분합니다. 위 코드에서는 color 속성을 red로, background-color 속성을 yellow로 지정했습니다. 이렇게 지정한 스타일은 해..
CSS 구성 요소 선택자(selector) : 스타일을 적용할 대상 지정 속성명(property) : 속성의 이름 속성값(value) : 속성에 적용할 값 선택자 {속성명 : 속성 값; } 과 같이 사용하여 스타일 적용 p { color: purple; text-align: center; } CSS 적용 방법 인라인 스타일 : HTML 요소의 여는태그에 style 속성으로 지정 내부 스타일 : 같은 HTML 문서 내부에 태그를 사용하여 지정 외부 스타일 : HTML 문서와는 별개의 파일로 style을 지정
하이퍼링크를 삽입하기 위해서는 태그를 사용합니다. 태그에는 다음과 같은 속성이 있습니다. href: 클릭했을 때 이동할 페이지의 URL target: 링크를 클릭했을 때 새로운 탭에서 페이지를 열지, 아니면 현재 탭에서 페이지를 열지를 결정합니다. 예시: 구글로 이동하기 위 코드에서는 "HTML 문서로 이동하기"라는 텍스트를 클릭하면 구글로 이동하며, 이때 새로운 탭에서 페이지를 엽니다.
img: 이미지 삽입 이미지를 삽입하기 위해서는 태그를 사용합니다. 태그는 닫는 태그가 없습니다. 태그에는 다음과 같은 속성이 있습니다. src: 이미지 파일의 경로 alt: 이미지 대체 텍스트 width: 이미지의 가로 크기 height: 이미지의 세로 크기 예시: 위 코드에서는 "image.jpg" 파일을 삽입하고, 이미지 대체 텍스트로 "My Image"를 사용합니다. 이미지의 가로 크기는 500, 세로 크기는 300으로 설정되어 있습니다. 참고로, 이미지의 크기를 설정하지 않으면 원래 이미지의 크기로 표시됩니다. embed: 미디어 파일 삽입 태그는 다른 미디어 파일(예: 오디오, 비디오)을 웹 페이지에 삽입할 때 사용하는 태그입니다. 태그는 다음과 같은 속성이 있습니다. src: 미디어 파일의 ..
열 합치기 열 합치기는 colspan 속성을 이용하여 구현할 수 있습니다. 1 2 3, 4 5 위 코드는 5개의 셀을 가지는 1행 표를 만드는 코드입니다. 3, 4 라고 적힌 셀은 colspan='2' 속성을 가지고 있어, 2개의 열을 합쳐 1개의 셀로 나타납니다. | 1 | 2 | 3, 4 | 5 | 행 합치기 행 합치기는 rowspan 속성을 이용하여 구현할 수 있습니다. 1 2 3 4 5 6, 7 8 9 10 11 12 13 14 위 코드는 2개의 행과 5개의 열을 가지는 표를 만드는 코드입니다. 6, 7 이라고 적힌 셀은 colspan='2' 속성을 가지고 있어, 2개의 열을 합쳐 1개의 셀로 나타내며, 8 이라고 적힌 셀은 rowspan='2' 속성을 가지고 있어, 2개의 행을 합쳐 1개의 셀로..
태그를 사용하면 해당 셀이 표의 제목 셀임을 나타낼 수 있습니다. 와 태그를 사용하여 표의 헤더와 바디를 나눌 수도 있습니다. 또한, 태그를 사용하여 표의 캡션(제목)을 추가할 수 있습니다. , 예시: 표 캡션 번호 이름 나이 1 홍길동 25 2 김철수 30 3 이영희 27 위의 코드는 제목이 있는 3행 3열의 표를 나타내며, 다음과 같이 나타납니다. 번호 이름 나이 1 홍길동 25 2 김철수 30 3 이영희 27 예시 태그를 사용하여 표의 맨 아래 부분에 총합, 평균 등의 정보를 추가할 수 있습니다. 태그는 태그의 자식 중 맨 마지막에 위치합니다. 나의 일정 날짜 운동 공부 회의 3월 1일 O X X 3월 2일 X O X 3월 3일 X X O 총합 1 1 1 코드는 3행 4열의 표를 나타내며, 다음과 ..
열은 속성을 가지고 있고, 행은 데이터를 가지고 있습니다. HTML에서 태그들을 가지고 표를 만드는 방법을 알아보겠습니다. 들어가기 다음은 3 x 3 크기의 표를 만드는 예시 코드입니다.: 열 1, 행 1 열 2, 행 1 열 3, 행 1 열 1, 행 2 열 2, 행 2 열 3, 행 2 열 1, 행 3 열 2, 행 3 열 3, 행 3 이 코드는 이렇게 나타납니다. 열 1, 행 1 열 2, 행 1 열3, 행1 열 1, 행 2 열 2, 행 2 열 3, 행 2 열 1, 행 3 열 2, 행 3 열 3, 행 3 위 코드에서 table 태그는 표 전체를 감싸며, tr 태그는 각 행을 나타냅니다. td 태그는 각 셀을 나타내며, 각 셀 안에 있는 내용은 해당 태그 사이에 입력됩니다. table, tr, td 태그 HT..
제목: 야! 너도 할 수 있어, HTML HTML은 프론트엔드 언어로 매운 쉬운 언어에 속합니다. 특히 매우 쉽게 읽을 수 있어 직관적인 표현이 가능합니다. 이를 활용하여 간단한 페이지를 구성해볼 수 있습니다. CSS 자바스크립트 다만 그 페이지가 여타의 다른 페이지처럼 작동하게 하려면 백엔드 부분이 존재해야 합니다. 이것은 굵은 글씨로 강조된 텍스트입니다. 이것은 b로 작성한 강조된 텍스트입니다. 이것은 em으로 작성한 이탤릭체로 강조된 텍스트입니다. 이것은 i로 작성한 이탤릭체로 작성한 텍스트입니다. 이것은 밑줄로 강조된 텍스트입니다. 이것은 취소선으로 표시된 텍스트입니다. 이것은 윗첨자로 표시된 텍스트입니다. 이것은 아래첨자로 표시된 텍스트입니다. 이것은 하이라이팅된 텍스트입니다. 이것은 코드 블록..