UserDonghu's Note

CSS에 약한 나를 위해 CSS 실습을 진행한다. 글쓰기 내용을 입력해 주세요 카테고리 일반 공지사항 제목 내용 파일첨부 목록 초기화 작성 미리 만들어 준비된 html 코드. 여기 CSS를 추가해보자. 요런 느낌으로 바꾸자. main요소의 width를 주고 가운데로 정렬 .write{ width: 700px; margin: auto; } 글쓰기(제목) 위에 마진 없애기 .write>.main-title{ margin-top: 0; } 내용을 입력해 주세요 색깔 바꾸고 아래 마진 좀 작게 .write>.main-desc{ color: #767676; margin-bottom: 5px; } 표 좌우로 꽉 채우고 위에 테두리 주기 .board-table{ width: 100%; border-top: 1px s..

flex - container에 사용하는 속성 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법 부모 요소를 flex-container, 자식 요소를 flex-item 이라고 부름 1차원적 레이아웃(x축, y축)을 위해 주로 사용 flex-direction 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정 row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향 가로) column : 위에서 아래 방향 (주축이 열 방향 세로) row-reverse : 오른쪽에서 왼쪽 column-reverse : 아래에서 위 justify-content 주축을 기준으로 배열의 위치를 조절하거나 아이템 간격 설정 flex-start : 컨테이너 시작쪽으로 정렬 flex-end : 컨테이너 끝쪽으..

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 태그 안 ..