🔻overflow🔻 요소의 내용이 요소의 상자 크기를 벗어날 때 어떻게 처리할지를 지정한다. visible: 요소의 내용이 상자 밖으로 나가도 가려지지 않고 보이게 한다. (기본값) hidden: 요소의 내용이 상자 밖으로 나가면 잘려서 보이지 않게 한다. scroll: 요소의 내용이 상자 밖으로 나가면 스크롤바가 나타나게 하여 스크롤해서 볼 수 있게 한다. auto: 내용이 상자 밖으로 나가면 스크롤바가 필요한 경우에만 나타나게 한다. inherit: 부모 요소의 속성값을 상속한다. ▶scroll ▶auto 상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자상자..
🔻박스 모델, Box Model🔻 모든 태그는 화면에 출력될 때(렌더링 될때) 사각형으로 출력된다. 태그가 화면에 출력될 때 공통된 성질에 관련된 정책이다. 속성 : border, width, height, padding, margin 1. border 테두리 모든 태그는 자신의 영역을 가진다. 영역을 기준으로 테두리를 가진다. 영역은 반드시 사각형이다. 공통된 접두어를 가진 속성들은 하나로 표현이 가능하다. 이렇게 표현한 것을 '속성그룹' 이라고 한다. 입력 필드에 포커스가 맞춰졌을 때 강조테두리가 부담스럽다면 아래처럼 outline을 none으로 설정하면 해제된다. outline: none; 2. width / height 블럭태그 크기와 인라인태그 기본 크기 정책이 다르다. 블럭태그의 기본 크기 정..
제네릭 폰트(Generic font) 특정한 폰트명을 지정하지 않고 일반적인 폰트 카테고리를 지정하는 CSS 속성이다. 웹 페이지가 특정 폰트를 사용할 수 없는 경우에 대비하여 대체 폰트를 지정하는 데 사용된다. '폰트 예약어'라고도 한다. 제네릭 폰트 카테고리 : serif , sans-serif , monospace , cursive , fantasy 1) serif(세리프): 획끝에 장식이 있는 폰트(궁서체, 바탕체) 2) sans-serif(산세리프) : 획끝에 장식이 없는 폰트(돋움체, 고딕체) 3) monospace(고정폭) : 문자폭이 균일한 폰트(궁서체) 4) cursive(손글씨) : 장식체 5) fantasy(판타지) : 장식체 적용 예시 font-family: 궁서체, 바탕체, mon..
1. 구글 폰트 https://fonts.google.com/?subset=korean¬o.script=Kore Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 왼쪽 Languge 탭에서 적용가능한 언어로 조회할 수 있다. 적용할 글꼴을 선택한 후 해당 글꼴의 굵기를 선택한다. 오른쪽 import 버튼을 클릭 후 아래의 코드를 복사하여 html 파일에 붙여넣는다. 2. 눈누 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 적용할 글꼴을 선택한다. 선택한 글꼴 창의 오른쪽 '웹폰트로 사용' 코드 부분을 복사한다. ..
다량의 텍스트 준비 아래 링크처럼 lorem ipsum 사이트를 이용하면 의미없는 단어들을 나열해준다. 더미데이터를 만들 때 사용한다. http://guny.kr/stuff/klorem/#/p-view 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 guny.kr 🔻텍스트 색상, 전경색(Fore Color)🔻 color 보통 검은색은 흰 배경색과 대비가 강하기에 잘 사용하지 않는다. #333333 ~ #555555 의 값을 잘 사용한다. (RGB가 같은 숫자면 회색이다.) p { color: #ff5733; ..
background-color와 background-image는 CSS에서 요소의 배경을 스타일링하는 속성들이다. 🔻1. background-color🔻 요소의 배경 색상을 지정한다. CSS 색상 표현법 1. Color Name : red, yellow, bule 2. RGB Color(16진수) : #FFFFFF 3. RGB Color(10진수) : rgb(255,255,255) 4. RGBA Color(10진수) : rgba(255,255,255,1) a : alpha channel의 약자,(0~1 사이의) 불투명도를 의미한다. 0으로 갈 수록 투명 🔻2. background-image🔻 background 속성과 함께 사용되어 요소의 배경을 스타일링하는 데에 사용되는 속성들 1) background..
🔻Emmet, Zen-coding🔻 CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성하는 기능 개발도구(Eclipse, VS code 등)들이 Emmet 기능을 지원한다. 생산성 도구 HTML과 CSS 코드를 간결하고 빠르게 작성할 수 있도록 도와주는 확장 툴이다. id,클래스,속성 선택자를 먼저 만들면 HTML 코드를 작성해준다. 1. 클래스 및 ID 속성 추가 .classname 또는 #idname과 같이 클래스와 ID 속성을 빠르게 추가할 수 있다. '$'를 사용하여 id 중복을 방지한다. 아이디는 중복되면 안되니 아래처럼 사용불가하다. div#box1{상자}*5 상자 상자 상자 상자 상자 숫자가 변화되야할 때는 '$'를 사용한다. div#box${상자}*5 상자 상자 상자 상자 상..
🔻Emmet 웹 개발에서 코드를 빠르게 작성할 수 있도록 도와주는 확장 기능(코드 단축키)이다. 원래는 텍스트 에디터나 IDE의 플러그인으로 제공되었으나, 지금은 많은 코드 편집 도구에서 지원하고 있다. 다운로드 페이지 접속 https://emmet.io/ 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: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.i..
https://steady-record.tistory.com/entry/HTML-%ED%91%9C-table%EC%83%9D%EC%84%B1-%EC%83%89%EC%83%81-%EC%A0%95%EB%A0%AC-%ED%81%AC%EA%B8%B0-%EC%85%80%EB%B3%91%ED%95%A9 [HTML] table 태그 (생성, 색상, 정렬, 크기, 셀병합) 표, table 🔻표 생성 순서 이해하기🔻 [2행 2열 상자 만드는 순서] 1. 큰 틀 하나를 만든다. 2. 가로 길이가 전체 길이와 같고 세로길이는 전체 길이의 1/2인 틀 2개를 만든다. 3. 2에서 만든 틀의 가로 steady-record.tistory.com 테이블 구성요소에는 table, tr, th, td로 구성되어 있다고했는데 사실 정확..
style 적용시 선택자 또는 속성이 충돌 날 때가 있다. 🔻1. 선택자 충돌🔻 같은 선택자를 중복하여 스타일을 적용할 때 충돌이 난다. 위에서 아래로 스타일을 적용하므로 적용하는 속성이 다르면 그대로 스타일 적용이 된다. > 큰 문제가 되지않는다. 상자 🔻2. 속성 충돌🔻 동일한 태그를 선택한 식별자들이 동일한 속성을 지정한다면 충돌이 발생한다. 작성된 순서에 따라 마지막에 작성한 속성이 적용된다. 상자 🔻3. 선택자 우선순위🔻 속성 충돌이 발생하면 코딩 순서에 상관없이 선택자 간의 우선 순서에 따라 속성이 적용된다. 점수로 계산되어 높은 점수의 선택자가 적용된다. 🔻선택자 점수 계산🔻 정밀도가 높을수록 점수가 높다.(동급일때만) 하위 선택자 점수가 높아도 상위 선택자를 넘어설 수 없다. 태그 선택자 ..
