Study/HTML & CSS

[CSS] 텍스트 (Text)

텍스트 (Text) Color 텍스트의 색상을 설정한다. 태그에 명시된 color 속성 값은 웹 페이지 내의 모든 텍스트 요소에 적용된다. 각 요소별로 따로 명시된 color 속성 값이 있다면, 해당 속성 값이 태그에 명시된 속성 값보다 우선 적용된다. 색상 표기법은 https://laurus-twt.tistory.com/137 참고 body { color: red; } p { color: maroon; } letter-spacing 텍스트 내에서 글자 사이의 간격을 설정한다. 좁게 하고 싶다면 숫자를 낮게, 넓게 하고 싶다면 숫자를 높게 하면 된다. .decLetterSpacing { letter-spacing: -3px; } .incLetterSpacing { letter-spacing: 10px; ..

[CSS] 폰트 (Font)

폰트 (Font) font-family 글꼴을 지정하는 속성이다. 속성 값이 여러 개의 글꼴로 설정되어 있다면, 웹 브라우저는 앞에서부터 순서대로 글꼴을 읽는다. 되도록이면 가장 앞에 있는 폰트는 큰 따옴표로 감싸 주는 것이 좋다. .serif { font-family: "Times New Roman", Times, serif; } .sansserif { font-family: Arial, Helvetica, sans-serif; } Google Font 홈페이지에서 원하는 폰트를 선택한다. 원하는 스타일을 선택한다. 페이지 오른쪽에 나오는 탭에서 태그 내용을 복사한 후, google font google font 직접 폰트 파일을 첨부 폰트 파일을 저장할 폴더를 생성한 후, 폴더 안에 폰트 파일을 넣는..

[CSS] 색 (Color)

CSS에서 색을 표현하는 방법 색상 이름으로 표현 HTML에서 색상 이름은 대소문자를 구분하지 않는다. https://www.w3schools.com/cssref/css_colors.asp 에 있는 색상 이름을 참고하면 된다. .blue { color: blue; } .green { color: green; } .silver { color: silver; } RGB 색상 값으로 표현 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현하는 RGB 색상값을 사용할 수 있다. RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다. https://htmlcolorcodes.com/ 를 참고하여 사용하면 된다. .blue { color: rgb(0..

[CSS] 기본 셀렉터 (Selector)

기본 셀렉터 (Selector) CSS에서는 스타일을 적용할 대상을 선택하기 위해 셀렉터(selector)를 사용한다. 종류로는 전체 셀렉터, HTML 요소 셀렉터, 아이디(id) 셀렉터, 클래스(class) 셀렉터, 그룹(group) 셀렉터가 있다. 전체 셀렉터 CSS 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택하는 셀렉터이다. * { color: red; } HTML 요소 셀렉터 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하며 선택할 수 있는 셀렉터이다. h2 { color: teal; text-decoration: underline; } 아이디(id) 셀렉터 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 웹 페이지에 포함한 여러 요소 중에 특정 아이디 이름을 가..

[HTML] 입력 양식 (Form)

입력 양식 (Form)의 기본 구성 입력 양식이란, 전체 영역을 정의하기 위한 태그 안에 입력 항목의 그룹을 위한 태그가 포함된 형태로 정의된다. 태그 안에서는 그룹의 제목 지정을 위해 태그가 사용될 수 있다. 은 입력 양식 영역 안에서 그룹을 형성하며, 필수적인 사항은 아니다. 내용 입력하기 태그 입력 양식의 영역을 지정하며, 모든 태그가 내부에 배치될 수 있다. 속성 설명 method 폼을 서버에 전송할 http 메서드를 지정 (GET / POST / PUT / DELETE) action 폼을 전송할 서버 쪽 스크립트 파일 지정 name 폼을 식별하기 위한 이름 지정 accept-charset 폼 전송에 사용할 문자 인코딩 지정 target action에서 지정한 스크립트 파일을 현재 창이 아닌 다른..

[HTML] 멀티미디어

비디오 (Video) 비디오 파일 등을 삽입하기 위해 사용하는 요소로, 태그를 사용한다. 태그 사이에 존재하는 텍스트는 웹 브라우저가 태그를 지원하지 않을 때만 화면에 표시된다. HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐이다. 이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다! HTML5 video 태그 태그 설명 비디오 파일 video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용 비디오 플레이어에 대한 텍스트 자막 HTML5 video 속성 속성 설명 src 재생할 비디오의 주소 지정 autoplay 비디오 자동 재생 지정..

[HTML] 텍스트 (Text)

텍스트 (Text) 제목 숫자 값이 작을수록 큰 수준의 제목을 의미한다. 보통 까지만 사용한다. 제목 텍스트 제목 텍스트 제목 텍스트 제목 텍스트 제목 텍스트 제목 텍스트 단락 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 부른다. 태그를 사용하여 단락을 표현한다. 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못 한다. 이럴 경우, 을 이용하여 줄 바꿈을 할 수 있으며, 띄어쓰기는 를 사용하면 된다. 를 사용할 경우, HTML 코드에서 작성한 텍스트 서식을 그대로 표현할 수 있다. 을 사용하여 수평 가로 구분선을 만들 수 있다. 여기서부터 단락입니다. 인용구 를 이용하여 짧은 인용구 표현이 가능하다. 앞, 뒤로 큰 따옴표가 붙는..

[HTML] 테이블 (Table)

테이블 (Table) 표를 구성하는 태그 나 은 없어도 되지만, 는 반드시 필요하다. 태그 설명 표 영역 지정 상단 제목 지정 본문 영역 하단 영역 행이나 열을 한 줄 형성 열의 제목 열의 내용 표를 구성하는 태그의 속성 속성 적용 가능한 태그 설명 값 border 테두리의 두께 1부터 정수 형태로 정의 width - 넓이 설정 - 에 설정할 경우, 표의 전체 넓이 - , 에 설정할 경우, 한 칸의 넓이를 의미하며 각 넓이의 합은 에 정의된 넓이보다 클 수 없음 - px를 의미하는 정수 값 - % 단위의 값 height - 높이 설정 - 에 설정할 경우, 표의 전체 높이 - , 에 설정할 경우, 한 칸의 높이를 의미하며 각 열에 대한 높이의 합은 에 정의된 넓이나 높이보다 클 수 없음 px를 의미하는 정..

[HTML] 리스트 (List)

리스트 (List) 목록 리스트 태그 각 항목을 명시하며, 원하는 수만큼 반복 사용이 가능하다. 태그 설명 - 순서가 있는 태그 - 포함하는 항목 앞에 일련 번호 표시 - 순위 데이터나 글 목록 등 표시하는 데에 주로 사용 - 순서가 없는 태그 - 포함하는 항목 앞에 아이콘 표시 - 메뉴 등 표시하는 데에 주로 사용 - 태그 내부에 포함되는 태그 - 목록의 항목 항목1 항목2 ... 항목n 목록 리스트 태그의 중첩 사용 태그 안에 새로운 목록 정의를 포함하여 2차, 3차 목록을 정의할 수 있다. 목록1 항목1 항목2 목록2 항목1 항목2 목록 리스트 태그의 속성 속성 내용 type - 목록에 사용될 마커 지정 - 속성값 - 1(숫자/기본값) - a(영어 소문자) - A(영어 대문자) - i(로마 숫자 소..

[HTML] 이미지 (Image)

이미지 (Image) 이미지의 표시 이미지의 사용과 웹 접근성 스크린 리더가 인식할 수 없는 형식으로 이미지를 통한 내용의 전달은 웹 접근성을 확보할 수 없다. alt 속성은 스크린 리더에게 이미지의 내용을 알려주기 위한 목적으로, 가급적으로 반드시 사용하는 것이 좋다. 이미지의 크기 지정 width, height는 이미지의 크기를 지정해 주는 속성이다. 보통 px 단위를 사용하는데, px은 모니터의 한 점을 표현하는 컴퓨팅 환경에서의 크기 단위이다. 크기가 주어지지 않는다면 원본 크기로 표시된다. 가로 혹은 세로 크기만 지정될 경우, 다른 축은 이미지 비율에 따라 자동 계산되어 표시된다. 이미지의 경로 절대 경로 웹 사이트 상에서 해당 이미지가 위치하는 URL이다. 상대 경로 현재 HTML 파일의 위치..