Programming

Programming/CSS

[CSS] display: 인라인 요소의 개행, float

🍁display [CSS] overflow, visibility, display 🍁오버플로우 (overflow) 박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에 내용이 빠져나가지 않는다. 만약 박 isaac-christian.tistory.com 이전의 display 글에서 이어진다. 인라인 요소의 개행 태그 사용 인라인 요소의 개행에는 태그를 사용한다. 태그의 목적 자체가 인라인 요소의 개행을 위해 만들어진 것이다. 이미지와 이미지 사이에 여백이 보이는가? 이 공백을 없애기 위해서는 태그를 사용하는 것 대신에 block 태그로 속성을 바꿔버리면 된다. display: block 인라인 요소를 블럭 요소로 바꾸..

Programming/CSS

[CSS] overflow, visibility, display

🍁오버플로우 (overflow) 박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에 내용이 빠져나가지 않는다. 만약 박스 크기를 유지하면서 내용을 보이지 않게 하거나 보이게 하고 싶다면 overflow를 사용하면 된다. visible은 오버플로우가 발생하면 넘치는 대로 두고, hidden은 오버플로우가 발생한 부분을 안 보이게 한다. scroll은 오버플로우가 발생하지 않아도 scroll 바를 만들고, auto는 오버플로우가 발생하지 않으면 scroll바를 만들지 않는다. overflow x, y overflow-x: ; overflor-y: ; 오버플로우는 x와 y에 따라 속성을 다르게 줄 수 있다. 🍁가시성 (..

Programming/CSS

[CSS] 박스 모델: border, width, height, padding, margin

🍁박스 모델 모든 태그는 화면에 출력될 때(렌더링 될 때) 사각형으로 출력된다. 태그가 화면에 출력될 때 공통된 성질에 관련된 정책(모델)이다. 대표적으로 테두리의 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..

Programming/CSS

[CSS] 텍스트 속성, 웹 폰트, 수치 표현법

🍁텍스트 속성 한글 Ipsum (간세네) 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 guny.kr 텍스트 관련 속성 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다. 모든 국민은 학문과 예술의 자유를 가진다. 제1항의 지시를 받은 당해 행정기관은 이에 응하여야 한다. 대통령은 국회에 출석하여 발언하거나 서한으로 의견을 표시할 수 있다. 대통령은 법률이 정하는 바에 의..

Programming/CSS

[CSS] 색상 및 이미지 표현법

🍁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..

Programming/CSS

[Client] Emmet (Zen-Coding), Lorem Ipsum

🍁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..

Programming/CSS

[CSS] CSS Seletor의 성질

🍁CSS Seletor의 성질 1. 선택자 충돌 2. 속성 충돌 3. 선택자 우선순위 선택자 충돌 상자 특정 태그를 찾는 선택자는 N개 이상 선언할 수 있다. 물리적으로 문제가 되지는 않지만 코드 관리상 어려움이 있으므로 웬만하면 한 곳에 모아서 선언하는 게 좋다. 속성 충돌 상자 위 코드에서는 선택자 충돌과 속성 충돌이 동시에 발생하고 있다. 동일한 태그를 선택한 식별자들이 동일한 속성을 지정하면 충돌이 발생하며, 작성된 순서에 따라 마지막에 작성된 속성이 적용된다. 즉, 덮어쓰기가 적용이 된다. #box1 { color: orange; } .box { color: blue; } div { color: red; } 그런데 위의 말대로 하면 파란색이 되어야 할 거 같은데, 주황색이 출력이 된다. 이는 선..

Programming/CSS

[CSS] CSS Seletor (CSS 선택자) 2

🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 선택자: sel1 + sel2 {} 9. 형제 선택자: sel1 ~ sel2 {} [CSS] CSS Seletor (CSS 선택자) 1 🍁CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } CSS 문법으로 위의 틀을 사용한다. 선택자와 isaac-christian...

Isaac-Christian
'Programming' 카테고리의 글 목록 (25 Page)