UserDonghu's Note

float 한 요소가 보통 흐름에서 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치되게 함. left : 왼쪽으로 right : 오른쪽으로 none : 기본값 inline, inline-block 요소에 float속성을 주게되면 block으로 계산되어 적용 float 해제하기 clear: both / right / left; container A B C 주의사항 : 자식 요소들이 모드 float 속성을 갖게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않음. 해결방법 - 부모에게 높이 값 지정하기 - overflow: hidden; .container{ overflow: hidden; } - 부모의 가상 요소 ::after 사용 .container::after..

:enabled / :disabled 활성화 / 비활성화 상태일 때 아이디 input:enabled { border: 1px solid royalblue; } :read-only / :read-write 사용자가 편집할수 없는 / 있는 상태일 때 :checked input type="checkbox, radio" 유형일때 선택된 상태를 나타냄 약관동의 /* input이 체크되면 input 바로 다음에 오는 형제 요소 lable에 줄이 쳐짐 */ input:checked+label{ text-decoration: line-through; } :required 필수입력값일 경우 ::placeholder 입력에 대한 추가 정보가 있을 경우 /* 이곳은 input입니다 의 글자색이 빨간색으로 변경 */ inpu..

CSS Box Model HTML 요소를 감싸는 상자 웹페이지는 이런 수많은 상자가 모여있는것 요소, 패딩, 테두리, 마진으로 구성 요소 : 텍스트, 사진 등 보여줄 대상 패딩 : 요소 주변 영역 테두리 : 요소와 패딩을 감싸는 테두리 마진 : 테두리 밖의 영역 CSS Box Model은 블록박스에 적용. 인라인 박스는 박스 모델에 정의된 일부 동작만 사용 inline 요소는 width, height, 상하 margin 값이 적용 X width 요소의 너비 설정 기본값은 콘텐츠 영역의 너비이지만, box-sizing 속성을 사용해 테두리 영역의 너비를 설정 auto : 기본값. 브라우저가 계산하여 지정(요소의 부모 크기 기준으로 가득 채우기) height 요소의 높이 설정 auto : 기본값. 브라우저가..

display 속성 박스의 유형을 지정하여 다른 박스들과 어떤 방식으로 배치할지 레이아웃 설정 주의) CSS 속성으로 시각적인 부분이 바뀔 뿐, 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님 block : 요소 전후에 줄 바꿈을 생성 inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성. inline-block : inline 줄 바꿈 없이 한 줄에 놓이지만, block 처럼 box-model의 width, height, margin, padding 값을 모두 설정 가능 flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향으로 설정 grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해 설정 none : 접근성 트..

CSS 언어 충돌시 어떤 것을 우선하는지 규칙 이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity) 라고 함 1. 후자 우선의 원칙 2. 구체성(명시도)의 원칙 3. 중요성의 원칙 1. 후자 우선의 원칙 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름 p {color: red; font-size:20px;} p {color: blue;} /* 뒤에 나온 파란색이 됨 */ 2. 구체성의 원칙 (Specificity : 명시도) 어떤 선택자가 더 구체적인가? 구체적인 선택자 .green{color:green;} p {color: red; font-size:20px;} p {color: blue;} /* 구체적인 class 선택자에 따라 초록색 */ (가중치 높음) ..

전체 선택자 universal selector html을 포함한 HTML 문서 내의 모든 요소를 선택 *를 사용하여 선택 *{ margin: 0; } 타입 / 유형 / 태그 선택자 type selector 특정 태그를 선택 h1{ font-weight: bold; } p{ font-size: 24px; } 아이디 선택자 (#) id selector 주의) HTML 페이지 내의 id는 유일해야 함 HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어짐 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많음 ... #hhddrr{ padding: 10px; } 클래스 선택자 ( . ) class selector 클래스 선택자는 한 페이지에 여러 개가 존재 가능 재사용성 높음 Hel..

상속(Inheritance) CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있음 ex) 부모 요소의 color 속성은 자식 요소에게 상속 O. 하지만 width, height, margin, padding, border와 같은 것은 상속 X button, input 요소처럼 form 관련 태그들은 상속받지 않기도 함. inherit : 선택한 요소에 적용된 속성값을 부모와 동일하게 즉, 상속 initial : 브라우저 기본 스타일 속성을 따르게 Hello Hello Hello Hello div{ color: red; } button{ color: inherit; } h1{ color: initial; } h2, p{ border: 2px solid pink; }

CSS란? CSS는 Cascading Style Sheets의 약자 Cascading : 연속화 Cascade : 폭포 CSS에서 스타일이 적용될 때 우선순위를 가지고 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙음 HTML의 스타일, 레이아웃 등을 꾸미는 역할 CSS를 한번 작성해 여러 HTML에 재사용 가능 작성방법 header(선택자){ color(속성): royalblue(속성값); } 주석 /* 주석 내용 */ CSS 적용하기 인라인 방식 태그 자체에 style 속성으로 스타일을 주는 방식 일부 스타일 적용에 제한이 있음 ex) 가상요소 :hover, ::before, ::after 사용불가 Hello world 내부 스타일 head 태그 안 ..

table 테이블을 생성할 때 사용 은 테이블 데이터의 컨테이너 요소 tr / th / td tr : table row. 테이블의 행 th : table header. 테이블의 행, 열의 제목을 나타내는 셀 td : table data. 셀 내용 caption 테이블의 제목이나 설명 table의 첫번째 자식으로 사용 필수 요소는 X 표의 목적에 대한 명확하고 상세한 설명 포함 CSS의 caption-side 속성으로 top, bottom 위치를 설정 가능 thead / tbody / tfoot 테이블의 머리글, 본문, 바닥글을 의미 구역을 나누는 요소로 사용 필수 요소는 X 코드의 가독성을 위해 명시적으로 사용 : 테이블 행 블록 내에 제목 열 그룹으로 구성할 경우 사용 : 행 블록 내에 테이블 데이터로..

form 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획. 꼭 form 태그로 묶어 줘야되나? 별도로 제출할 필요가 없다면 사용하지 않아도 됨. method 양식을 제출할 때 사용할 HTTP 메소드 Post : 양식 데이터를 요청 본문으로 전송. 브라우저에 캐시되지않고 히스토리에도 남지 않음. Post 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송. 데이터의 길이제한이 없고, GET 방식보다 보안성이 높음. enctype 속성. method의 속성이 post인 경우, enctype은 양식 제출시 데이터의 MIME유형을 나타낸다. Get : 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송. Get 방식의 HTTP 요청은 브라우저에 의해 ..