● position 속성 - 요소의 위치 형식을 지정 - position: absolute | fixed | relative | static | inherit - absolute : 절대 위치 좌표 설정 - fixed : 브라우저 창 기준으로 죄표를 고정 - relative : 문서의 흐름 상 있던 위치를 기준으로 좌표를 지정 - static : 문서의 흐름 상 위치 (기본 값) - inherit : 부모 태그의 속성 값을 상속받음
Front-End Study
주석처리 1. HTML의 주석처리 - 로 주석처리함 2. CSS의 주석처리 - /* */ 로 주석처리함 3. Javascript의 주석처리 - // 로 주석처리함
position 속성 정리 1. position 속성 정리 (백과사전 바로가기) - 요소의 위치 형식을 지정 - position의 종류는 4가지가 존재 - absolute - fixed - relative - static 2. absolute - 절대 위치 좌표 설정 - 문서의 흐름과 관계없이 top, right, bottom, left 속성 값을 이용해 요소를 원하는 위치에 배치 /* 박스의 크기 설정 */ .box { position: absolute; width: 100px; height: 100px; background-color: #0094ff; } /* position 설정 */ #crd1{top: 0; left: 0;} #crd2{top: 0; right: 0;} #crd3{bottom: 0..
● ul, li 태그 - 순서 없는 목록 생성 - 태그를 사용하고 태그 안에 태그를 사용해 각 항목을 표시함 ● ol, li 태그 - 순서 있는 목록 생성 - 태그를 사용하고 태그 안에 태그를 사용해 각 항목을 표시함 - - type 속성 : 순서의 종류 - 1 : 숫자(기본값) - a : 영문 소문자 - A : 영문 대문자 - i : 로마숫자 소문자 - I : 로마숫자 대문자 - start="시작 번째 수" 속성 : 중간 번호부터 시작 가능 - reverse 속성 : 항목을 역순으로 표기 ● dl, dt, dd 태그 - 설명 목록 생성 - 태그 : 목록 - 태그 : 제목 - 태그 : 설명
노멀라이즈 (Normalize) 1. 노멀라이즈 - HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하기 위해 적용시킴 2. a 태그의 노멀라이즈 - 기본일 때, 밑줄이 있고 색이 파랑색임 (링크로 바로가기) - 노멀라이즈 적용 시, 밑줄과 색이 바뀜 ※ inherit : 부모의 스타일을 적용 링크로 바로가기 3. body의 노멀라이즈 - 기본일 때, 약간의 margin이 들어감 Hello!!! - 노멀라이즈 적용 시, magin이 사라짐 Hello!!! 4. ul, li의 노멀라이즈 - 기본일 때, 점과 여백이 있음 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 - 노멀라이즈 적용 시, 점과 여백이 사라짐 메뉴 아이템1 메뉴 아이템2 메뉴 아이템3
여백을 조절하는 속성 1. margin 속성 (백과사전 바로가기) - 요소 주변 여백 설정 - 한 요소와 다른 요소 사이의 간격 조절 가능 - margin-left와 margin-right의 값을 auto로 하면, 웹 요소를 중앙에 배치할 수 있음 2. 마진 중첩(margin overlap) 현상 - 요소를 세로로 배치할 경우, 마진과 마진이 만날 때, 큰 값을 기준으로 겹쳐지는 현상 ※ 가로는 겹치지 않음 - margin= 30px;로 설정할 경우, 30px+30px=60px가 아닌 30px로 설정됨 3. padding 속성 (백과사전 바로가기) - 콘텐츠 영역과 테두리 사이 여백 설정
박스 모델(Box Model) 1. 박스 모델(Box Model) - 박스 형태의 콘텐츠 - 박스 모델의 구조 - 실제 콘텐츠 영역 - 박스와 콘텐츠 사이의 여백인 패딩(padding) - 박스의 테두리(border) (border은 따로 정리) - 여러 박스 모델 사이의 여백인 마진(margin) 2. width, height 속성 - 콘텐츠 영역의 크기 - 너비(width), 높이(height)를 설정하여 콘텐츠 영역의 크기를 정함 - , , auto로 설정 가능
● margin 속성 - 요소 주변 여백 설정 - margin-top: | | auto - margin-right: | | auto - margin-bottom: | | auto - margin-left: | | auto - margin: - margin: - 크기 : 너비 or 높이 값을 ps 나 cm 같은 수치로 지정 - 백분율 : 너비 or 높이 값을 %로 지정 - auto : display 속성에서 지정한 값에 맞게 자동으로 지정 ● padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정 - padding-top: | | auto - padding-right: | | auto - padding-bottom: | | auto - padding-left: | | auto - padding: - ..
한칸 띄우기 1. 한칸 띄우기 - 여러 칸을 띄우고 싶지만 html에서는 제한적임 - 그래서 를 사용 (공백을 의미) 안 녕 하 세 요
반응, 상태, 구조 선택자 1. 반응 선택자 - 사용자 반응으로 생성되는 특정한 상태를 선택함 - :active : 사용자가 마우스로 클릭한 태그 선택 - :hover : 사용자가 마우스 커서를 올린 태그 선택 반응 선택자 반응 선택자 2. 상태 선택자 - 입력 양식의 상태를 선택할 때 사용 - :checked : 체크 상태의 input 태그 선택 - :focus : 포커스를 맞춘 input 태그 선택 - :enabled : 사용 가능한 input 태그 선택 - :disabled : 사용 불가능한 input 태그 선택 사용 가능 사용 불가능 /* input 태그가 사용 가능일 때, */ input:enabled {background-color: white;} /* input 태그가 사용 불가능일 때, *..
텍스트 관련 태그 ※ 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 - 글자의 두께 조절 -..
