나만의 코딩 일지

table 표를 만드는 태그 기본적으로 몇 줄(행) 몇 칸(열)이라고 불린다(행, 열). 표를 이용한 형태를 만들 때 사용하는 태그 table 구조 : table > tr > td -> table > 행 > 열 table 관련 태그들 table : table 전체를 감싸는 태그 tr : (table row), 테이블의 행을 의미하는 태그, 자손으로 th나 td가 반드시 있어야 한다. td : (table data), 테이블의 일반 셀(칸)을 의미하는 태그, 부모인 tr 안에 있어야 한다. base style : 왼쪽 정렬(text-align : left) th : (table header), 테이블의 제목 셀(칸)을 의미하는 태그, 부모인 tr 안에 있어야 한다. base style : 중앙 정렬(tex..

시맨틱 구조(semantic-tags) 검색 엔진 같은 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와주는 지능형 웹, 통칭적으로 의미를 가진 구조 = Content Model = Semantic 어떤 요소가 어떤 내용 또는 태그를 포함할 수 있는지에 관한 정의 웹 페이지의 구조를 더욱 쉽게 이해 의미 요소를 가진 태그 자신의 컨텐츠를 명확하게 정의 코드의 가독성을 높이고 의미를 명확하게 해주는 장점 컴퓨터의 정보를 이해, 논리적인 추론이 가능한 구조 시맨틱 구조의 대표적인 태그 header : 머리말 의미, 헤더, 로고, 네비게이션 검색창 nav : 메뉴를 묶거나 메뉴를 담을 때 사용 section : 콘텐츠 / 단락 나눔 주제별 묶기, 제목 태그와 단락 나누며 표현 article : ..

멀티미디어 html5에서 음악이나 오디오 같은 사운드를 재생하기 위해 사용 속성 종류 src="url" : 오디오 파일의 위치를 연결, 명시 controls : 웹 화면에 재생 컨트롤 막대를 표시 muted : 오디오가 재생 중이지만 소리를 끔(음소거 처리) loop : 오디오를 반복 재생 autoplay : 오디오를 자동 재생(크롬에서는 자체적으로 자동 재생을 제한하고 있으므로 개별성 하지 않을 경우 적용이 되지 않음) preload : (auto/metadata/none) 재생 버튼을 눌러 재생하기 전 오디오 파일을 다운로드해 준비 오디오 요소 파일 확장자 MP3 : Moving Picture Experts Group에 의해 개발, 손실 압축형 파일 형식으로 가장 많이 사용 WAV : IBA과 Mic..

color - 색상 관련된 속성 hex 가장 많이 사용되는 색상 코드 방법 숫자 영문 조합의 6자리 코드(16진수 색상) 반복되는 2자리는 병합하여 사용 가능 ex) #ff0000 -> #f00 단어 기입 방법 특정 단어로 기입하는 방법 기본 단어 외에는 사용하는 것을 추천하지 않음 ex) black, white... rgb(red, green, blue) 총 red, green, blue의 256가지 색상을 숫자 값으로 표기 256가지 = 0 ~ 255까지 ex) rgb(0, 0, 255) = blue 100%의 양 rgba(red, green, blue, alpha) 총 red, green, blue의 256가지 색상을 숫자 값에 투명도가 더해진 표기 alpha = 0 ~ 1 사이의 소수점으로 표기 ..

배경 이미지 background-image: url("이미지의 경로") : 배경 이미지를 불러오는 속성, 쉼표(,)로 구분 지었을 때는 2개 이상의 이미지가 적용(먼저 작성한 이미지가 상당에 표현) background-repeat : no-repeat : 반복하지 않은 원본 한 장 :repeat-x : 가로 반복 :repeat-y : 세로 반복 background-size: 배경 이미지 사이즈 : %(가로 상의 비율), px : 두 자리 입력 시 x y : ex) 100px 200px : cover : 이미지의 고정비를 유지하면서 크게 설정, 이미지의 고정비가 요소와 다를 시 잘라내어 빈 공간이 생기지 않게 설정 : contain : 이미지가 잘리거나 형태가 무너지지 않는 한도 내에서 제일 크게 설정 b..

속성 선택자 속성 선택자를 선택하면 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택 태그가 가지고 있는 특정한 문자열을 확인 종류 : [속성이름="속성값"] -> [속성명 + 속성값] [속성이름*="속성값"] -> [속성명 + 특정 문자 들어간 속성값] (-(o), _(o), 공백(o), 합성어(o)) [속성이름~="속성값"] -> [속성명 + 특정 문자 들어간 속성값] (-(x), _(x), 공백(o), 합성어(x)) [속성이름$="속성값"] -> [속성명 + 접미사로 끝나는 속성값] (-(o), _(o), 공백(o), 합성어(o)) [속성이름^="속성값"] -> [속성명 + 접두사로 시작하는 속성값] (-(o), _(o), 공백(o), 합성어(o)) [속성이름|="속성값"] -> [속성..

구조 선택자 부모의 요소 안에서 특정한 위치의 요소를 선택할 때 사용 후손 + 자손 선택자와 함께 많이 사용 종류 : :first-child : 부모 박스 안에서 형제 관계 중에서 첫 번째에 위치하는 특정한 태그 선택 :last-child : 부모 박스 안에서 형제 관계 중에서 마지막에 위치하는 특정한 태그 선택 :nth-child(n) : 부모 박스 안에서 형제 관계 중에서 앞에서 수열 번째의 특정한 태그 선택(예: 1, 2, 3 / 2n+1(홀수) / 2n(짝수)) :nth-last-child(n) : 부모 박승 안에서 형제 관계 중에서 뒤에서 수열 번째의 특정한 태그 선택 아메리카노 카페라떼 연유라떼 바닐라라떼 청포도에이드 형태 구조 선택자 일반 구조 선택자와 비슷하지만 태그 형태를 구분 종류 : ..

후손 선택자 & 자손 선택자 후손 선택자 : 해당 요소의 하위 요소에 있는 특정한 요소를 모두 선택 사용 방법 : 선택자A 선택자B 자손 선택자 : 해당 요소의 바로 밑에 위치하는 특정한 요소를 선택 사용 방법 : 선택자A > 선택자B 자손 선택자 & 후손 선택자 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with deskt..