시간 빌게이츠가 간드아

상황: flex-direction이 column인 부모 요소에A(flex-direction이 column),B(flex-direction이 column)라는 display가 flex인 자식요소가 있다. 위에 있는 A요소의 min-height의 값이 0일 경우엔A의 길이가 얼마든지 길어져도 B가 화면 아래로 내려가지 않는데 A의 min-height를 auto로 주면 A의 길이가 길 경우B가 밀려서 화면 아래로 내려가기 때문에 스크롤을 아래로 내려야 B의 아래쪽에 위치한 내용들이 보이게 된다. 설정의미동작min-height: auto (기본값)자식은 최소한 자신의 내용 높이만큼 공간을 가져야 함A가 내용만큼 높아져서, B를 밀어냄 (→ 스크롤 발생)min-height: 0자식이 flex shrink 되어 내..

아이디나 비밀번호를 구글과 같은 사이트에 저장 한 뒤저장된 정보를 input 입력창에 불러오면input의 배경 색상이 자동으로 지정되어 나타나는 경우가 있다. 이는 :autofill이라는 가상 클래스에 스타일이 선언되어 있기 때문인데디자인을 원하는 대로 커스텀하고 싶으면 브라우저 호환성을 고려해 :autofill과 :-webkit-autofill(크롬의 경우) 가상 선택자를 써서원하는 대로 스타일을 재선언해줘야 한다. 문제는 크롬 같은 경우는 !important로 요소들에 대한 스타일이 선언되어 있어서다른 방식으로 스타일을 입혀줘야 한다는 것이다.input:autofilll { color: -internal-light-dark(black, white) !important; background-color:..

block__element--modifier 구조에 맞춰 class를 쓰는 방식. 최대한 단일 클래스로 선택자를 불러와 특이성을 낮춰 !important를 쓰는 일을 줄인다. 1.구조 1).Block -독립적인 컴포넌트를 의미 -다른 블록으로 들어갈 수도 있지만 독립적으로도 쓰임 -단어를 조합 시 하이픈으로 연결 -목적에 따라 이름을 정해줄 것 -환경에 따라 영향을 받으면 안됨 2).Element -의존적인 구성요소를 의미 -블록이 있어야 의미를 가지기 때문에 분리해 재사용할 수 없음 -목적에 따라 이름을 정해줄 것 -단어끼리 조합은 하이픈으로 함 -필수 작성 아님 3).Modifier -Block이나 Element의 속성을 의미 (모양, 동작, 상태) -boolean이나 key-value타입으로 작성..

콘텐츠 영역과 관련된 속성. 글자가 width, height값을 훨씬 넘겨버릴 때 화면상에 어떻게 보여줄지를 결정한다. - overflow: visible; 내용이 영역을 벗어나는 한이 있어도 다 보여준다. - overflow: hidden; 내용이 영역을 넘어가면 그 넘어간 부분은 숨긴다. - overflow: auto; 내용이 영역을 넘어가면 스크롤을 만들고 넘어가지 않으면 스크롤을 만들지 않는다. - overflow: scroll; 내용이 영역을 넘어가지 않아도 무조건 세로, 가로 방향 스크롤을 만든다. 출처 더보기 - 2020 국비교육 공부 내용

A A는 첫 번째 알파벳 B B는 두 번째 알파벳 C C는 세 번째 알파벳 @charset="utf-8"; /*tag reset*/ body, ul, li, figure {padding:0; margin:0;} ul {list-style: none;} ul {width: 260px; margin: 30px auto; padding: 20px; border: 2px solid black;} ul li {margin-top: 20px; background:ORANGE;} ul li:first-child {margin-top: 0px;} ul li strong, ul li figure figcaption {float: left; width: 140px;} ul li strong {text-indent: 10p..

- 웹 문서에서 사용할 글꼴은 font-family속성으로 지정한다. - 부모요소의 글꼴을 지정해주면 자식요소로 상속된다. 따라서 보통 제일 윗 요소인 body에 선언한다. - 서체명이 한글이거나 공백이 있는 경우 인용부호로 감싼다. - 한글명은 영문명으로 다시 한 번 써준다. 인식을 못하는 컴퓨터도 있기 때문이다. - 한 가지 글꼴만 지정해줘도 되지만 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴까지 지정한다. 1. font-size font-size의 속성값으로는 절대크기, 상대크기, 크기값 직접 지정, 백분율이 올 수 있다. 크기 값을 직접 지정하는 경우 고정되어 있는 단위인 px말고도 em과 rem이라는 단위가 있다. * em 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로..

메뉴A 메뉴B 메뉴C 메뉴D /* [displayBorder] */ #displayBorder ul li {display: inline-block; margin-right: -6px; border-bottom: 1px solid rgb(0, 0, 255);} /* inline, inline-block 요소들은 나열했을 때 4px정도의 여백이 사이에 생긴다. i. 가독성때문에 권하지 않음: 그때 html문서에서 li, /li태그의 간격을 띄지 않고 붙여주면 된다. ii. padding은 음수가 적용될 수 없다. margin에 약-5px을 준다. (브라우저 별로 사이즈를 달리 적용해야 한다)*/ #displayBorder ul li a {display: block; padding: 10px 30px; fon..

1. block 요소와 inline요소 display: none; - 요소를 렌더링하지 않도록 설정. - 원래의 요소가 있었던 영역도 나타내지 않는다. - 스크린 리더기도 읽어주지 않는다. ​ display: block; - 가로 영역을 모두 사용한다. - block요소 다음에 오는 요소는 무조건 줄내림이 된다. - width, height, margin, padding속성을 지정할 수 있다. - inline, block요소를 중첩시킬 수 있다. - ex). , , , , , , , .. 이중 h와 p는 예외적으로 내부에 inline요소만 중첩시킬 수 있다. ​ display: inline; - 해당 html요소의 내용만큼만 영역을 차지한다. - 다음에 오는 요소가 줄바꿈이 되지 않는다. - width,..

메뉴A 메뉴B 메뉴C 메뉴D /*tag reset*/ body, h1, ul {padding: 0px; margin:0px;} ul {list-style: none;} a {text-decoration: none; color: inherit;} #floatBorder ul {float: left; border-bottom: 1px solid #009000;} /* ② 자식인 li가 float되어 생기는 문제 해결 - 부모도 float추가 */ #floatBorder ul li{float: left;} /* ① block인 li를 한 줄에 여러개 배치 */ #floatBorder ul li a {display: block; padding: 10px 20px; font-weight: bold; color: ..

CSS (Cascading Style Sheets, 스타일 시트) 웹 문서의 스타일을 미리 저장해 두는 기술 선택자와 선언부로 나뉘며 선언부 안에는 속성과 속성값이 들어간다. 속성은 ;로 구분하지만 마지막 속성값 뒤에는 ;를 꼭 붙여주지 않아도 된다. *외부 css stylesheet만들기 CSS코드를 넣는 방식으로는 내부, 외부, 인라인 스타일 시트가 있다. 제일 자주 쓰이는 것은 외부 스타일 시트이다. html 파일(.html) : 태그 아래에 를 적어준다. css 파일(.style) : @charset "utf-8";을 맨 윗줄에 적어준다. *선택자 영역을 그룹지어 스타일을 적용하는 div태그 제목을 나타내는 h1태그 제목을 나타내는 h2태그 제목을 나타내는 h3태그 제목을 나타내는 h4태그 제목을..