🍁position position은 요소의 위치를 지정하는 기능이다. 태그의 위치를 지정하는 방법 1. padding > 부모가 자식의 위치를 정한다. 2. margin > 스스로 위치를 지정한다. 3. position > 정석 (CSS1 ~ CSS3) 4. transform > 정석 (CSS3) 어떤 태그를 어떤 위치에 지정을 하고 싶을 때 사용할 수 있는 여러 가지 방법이 있다. 이때 정석은 position을 사용하는 방법이다. position의 특징 position은 좌표값을 사용하여 위치를 지정한다. 좌표를 x, y라고 부르지 않고, left(x), top(y)이라고 부른다. 좌표를 지정하는 방식으로 여러 개를 제공한다. 좌표가 유효하려면 기준점이 어딘지를 알아야 하는데, 원점(기준점)이 다양하기..
🍁CSS 초기화 작업 문자열입니다. 제목입니다. 문자열입니다. 문단입니다. 문자열입니다. 영역입니다. 문자열입니다. , , 태그 셋 다 padding은 없다. 그런데 태그와 태그에는 우리가 주지 않은 margin이 있다. 이처럼 기본적으로 모든 태그들은 서식을 가지고 있다. 이러한 브라우저의 기본 설정을 없애는 작업을 해보도록 하자. user agent stylesheet user agent stylesheet는 브라우저가 준 서식이다. 즉, 이 서식은 다른 브라우저에서 보면 값이 바뀌어서 다르게 화면이 보일 수 있음을 의미한다. 개발자 입장에서는 어떤 브라우저에서 보던 똑같은 화면이면 좋겠지만, 브라우저마다 CSS를 바꿔놓기 때문에 이를 통제하는 기능을 사용하곤 한다. 1. Reset CSS https..
🍁display [CSS] overflow, visibility, display 🍁오버플로우 (overflow) 박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에 내용이 빠져나가지 않는다. 만약 박 isaac-christian.tistory.com 이전의 display 글에서 이어진다. 인라인 요소의 개행 태그 사용 인라인 요소의 개행에는 태그를 사용한다. 태그의 목적 자체가 인라인 요소의 개행을 위해 만들어진 것이다. 이미지와 이미지 사이에 여백이 보이는가? 이 공백을 없애기 위해서는 태그를 사용하는 것 대신에 block 태그로 속성을 바꿔버리면 된다. display: block 인라인 요소를 블럭 요소로 바꾸..
🍁오버플로우 (overflow) 박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에 내용이 빠져나가지 않는다. 만약 박스 크기를 유지하면서 내용을 보이지 않게 하거나 보이게 하고 싶다면 overflow를 사용하면 된다. visible은 오버플로우가 발생하면 넘치는 대로 두고, hidden은 오버플로우가 발생한 부분을 안 보이게 한다. scroll은 오버플로우가 발생하지 않아도 scroll 바를 만들고, auto는 오버플로우가 발생하지 않으면 scroll바를 만들지 않는다. overflow x, y overflow-x: ; overflor-y: ; 오버플로우는 x와 y에 따라 속성을 다르게 줄 수 있다. 🍁가시성 (..
🍁박스 모델 모든 태그는 화면에 출력될 때(렌더링 될 때) 사각형으로 출력된다. 태그가 화면에 출력될 때 공통된 성질에 관련된 정책(모델)이다. 대표적으로 테두리의 border, width, height, padding, margin을 조정한다. 🍁테두리 (border) 모든 태그는 자신의 영역을 가지며, 해당 영역을 기준으로 테두리를 가진다. 이때 태그의 영역은 반드시 사각형이다. 박스 모델 상자1 상자2 상자3 #box1 { border-color: blue; /* 선 색상 */ border-width: 5px; /* 선 두께 */ border-style: double; /* 선 종류 */ /* border-style: solid; */ /* border-style: dotted; */ /* bord..
🍁텍스트 속성 한글 Ipsum (간세네) 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 guny.kr 텍스트 관련 속성 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다. 모든 국민은 학문과 예술의 자유를 가진다. 제1항의 지시를 받은 당해 행정기관은 이에 응하여야 한다. 대통령은 국회에 출석하여 발언하거나 서한으로 의견을 표시할 수 있다. 대통령은 법률이 정하는 바에 의..
🍁HTML과 CSS의 차이 HTML은 특정 태그에 미리 정해져 있는 속성이 있다. 예로 들어 는 사용할 수 있지만, 는 사용할 수 없다. 반면에 CSS는 모든 속성을 모든 태그에 적용 가능하며, 어떤 속성이든 선택자로 찾은 모든 태그에 적용 가능하다는 특징이 있다. HTML과 CSS 오류 background-position: 50 50; /* 오류 */ background-position: 50px 50px; HTML과 CSS는 에러 메시지를 띄우지 않는다. px를 지정해주지 않으면 잘못 사용한 것이지만, 에러 메시지가 발생하지 않으므로 조심하도록 한다. 🍁CSS 색상 표현법 1. Color Name: red, yellow, blue.. 2. RGB Color(HEX-16진수): #FFFFFF 3. RG..
🍁Emmet (Zen-Coding) CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성할 수 있도록 하는 기능이다. 다양한 개발 도구(Eclipse, VS CODE..)에서 Emmet 기능을 지원하고 있다. 주로 #, ., [], {}, +, >, $ 등의 선택자 노드를 조합하여 사용하며, Emmet은 생산성을 높여주는 생산성 도구라고 할 수 있다. Emmet — the essential toolkit for web-developers Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Dem..
