텍스트 관련 태그 ※ abc 순으로 정렬 ● blockquote 태그 - 인용문 넣기 - ● br 태그 - 줄 바꿈 태그 - (닫힌 태그 필요 X) ● em 태그, i 태그 - 이탤릭체로 표시 - - ● hn 태그 - 제목 표시 태그 - - hn 태그는 크기 순으로 1~6까지 존재 ● hr 태그 - 수평 줄 넣기 - (닫힌 태그 필요 X) - 가로선이 삽입됨 ● mark 태그 - 형관헨 효과 내기 - - 선택된 부분의 배경색이 노란색으로 변함 ● p 태그 - 단락 생성 태그 - - p 태그는 줄바꿈 없이텍스트를 한 줄로 표시 ● pre 태그 - 입력하는 그대로 화면에 표시 - 소스의 형태를 그대로 브라우저 화면에 표시함 ● q 태그 - 인용내용 표시 - - blockquote는 블록레벨 태그이지만, q ..
● a 태그 - 하이퍼링크를 걸어주는 태그 - - _self : 링크 내용을 현재 페이지에 표시 (기본값) - _blank : 링크 내용을 새 창 or 새 탭에 표시 - _parent : 프레임 사용 시, 링크 내용을 부모 페이지에 표시 - _top : 프레임 사용 시, 링크 내용을 전체 화면에 표시 - 프레임명 : 직접 프레임명을 명시해서 사용 ● img 태그 - 이미지를 삽입하는 태그 - 닫는 태그는 없음 - - src=" " : 이미지 파일 경로 지정 - alt=" " : 이미지를 설명해 주는 대체 텍스트 (이미지가 나오지 않을 경우를 대비) - width, height : 이미지 크기 조정 (CSS로 대체 가능) ※ , 태그로 이미지에 설명 글 붙이기 가능
● display 속성 - 어떻게 보여줄 지 결정 - display: block | inline | inline-block | none; - block : 블록 박스 - inline : 인라인 박스 - inline-block : block과 inline의 중간 형태 - none : 아무것도 보이지 않음
※ abc 순으로 정렬 ● font-size - 글자 크기 조절 - font-size: medium | xx-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit - medium : 기본 글자 크기 - xx-small, x-small, small, x-large, xx-large, : medium의 상대적인 크기 - smaller, larger : 부요 요소의 글자 크기에 대한 상대적인 크기 - length : px, %, em, rem 등으로 크기 설정 - initial : 기본 값으로 설정 - inherit : 부모 요소의 속성 값을 상속 받음 ● font-weight - 글자의 두께 조절 -..
엘리먼트의 부모, 자식, 형제관계 1. 엘리먼트의 부모, 자식, 형제관계 - 부모 엘리먼트 : 나를 감싸는 엘리먼트 - 자식 엘리먼트 : 내가 감싸는 엘리먼트 (div > a 처럼 표시) - 후손 엘리먼트 : 부모를 기준으로 자식의 자식인 엘리먼트 (div a 처럼 표시) - 형제 엘리먼트 : 같은 부모를 둔 엘리먼트 2. 예시 html에 다음과 같이 있다고 가정 1 2 1 2 3 - 여기서 div가 부모 엘리먼트이며 h1, h2, ul이 자식 엘리먼트 - h1, h2, ul은 형제 엘리먼트 - li는 ul의 자식 엘리먼트 - css를 div에 적용하면 자식 엘리먼트 또한 적용되며, css를 h2에 적용하면 다른 h1과 ul는 적용되지 않음
display 속성 정리 1. display 속성 (CSS 사전 바로가기) - 웹 페이지의 레이아웃(Layout)을 결정하는 CSS의 중요한 속성 중 하나 - inline-bolck or inline, block, none이 있음 종류 inline-block, inline block none 너비 너비가 설정되어 있지 않다면, 최소한으로 줄어듦 너비가 설정되어 있지 않다면, 최대한으로 넓어짐 없어짐 높이 높이가 설정되어 있지 않다면, 최소한으로 줄어듦 높이가 설정되어 있지 않다면, 최소한으로 줄어듦 없어짐 line 사용 한 줄에 최대한 여러개가 나옴 한 줄을 무조건 혼자 사용 정렬 부모의 text-align에 의해서 정렬 스스로 margin-left, margin-right를 사용해서 정렬 ※ 예외 사항..