이렇게 삽니다

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태그 제목을..

Pseudo Selectors (가상 선택자) 태그 이름이나 class, id를 쓰지 않고 선택자를 쓰는 법. 가상 클래스와 가상 요소로 나뉜다. ex). 가상선택자 first-child 사용하기 animal li:first-child ① animal이라는 부모 안에 있는 ② 첫번째 자식요소인 ③ li에 대한 속성 첫번째 자식요소가 li가 아니라면 써먹을 수 없는 가상 선택자다. 가상 클래스 (pseudo class) 가상 요소 (pseudo element) 문법 선택자:가상클래스명 선택자::가상요소명 쓰임 요소의 특정 상태에 대한 스타일을 설정할 때 쓴다. 선택한 요소의 일부분만 스타일을 다르게 할 때 쓴다. 종류 :active :any-link :blank :checked :current :defau..

참고 - https://opentutorials.org/course/2418/13414 - https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1 - position : eliment(tag)가 화면의 어디에 위치하는지를 알려주는 속성 - offset :부모 박스의 좌측 상단으로부터 자식까지의 x, y 거리 - bottom vs top : 두 값이 동시에 있을 때 순서 상관없이 top 값만 씀. - left vs right : 두 값이 동시에 있을 때 순서 상관없이 left 값만 씀. 1. position: static position의 기본값, offset 값은 설정할 수 없으며 다른 태그와 상호작용하여 원래 위치해야 하는 곳에 있게 됨. positio..