user agent stylesheet 브라우저마다 css를 다르게 적용한다. > 모든 브라우저에서 동일되게 보이도록 통제한다. 🔻CSS 초기화작업🔻 브라우저 설정을 막는다. 1. Reset CSS https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in..
🔻float🔻 기존의 출력 정책을 깨고, 자신의 위치에서 벗어나 현재 라인의 좌측(우측) 끝으로 이동한다. float: left; 또는 float: right;를 사용하여 요소를 왼쪽이나 오른쪽으로 이동한다. 이동 시, 라인의 윗쪽으로 붙는다. 인삿말 중부지방과 전북, 경북권은 오후까지, 강원 남부와 충북, 경북 북부는 밤까지 비가 이어지겠다. 26일부터 이틀간 예상 강수량은 수도권(서해5도 제외)·충청권 5∼30㎜, 강원영동·경북북부 동해안 20∼70㎜, 강원영서·대구·경북(북부 동해안 제외), 울릉도·독도 5∼40㎜, 전북·서해5도 5∼20㎜다. 광주·전남 5㎜ 미만, 부산·울산·경남은 5㎜ 안팎, 제주도는 5∼10㎜의 비가 26일 하루 동안 내릴 것으로 예보됐다. 아침 최저기온은 18∼22도, 낮 ..
🔻DISPLAY🔻 가장 많은 속성을 가지고 있다. 요소의 출력 방식을 제어하는 역할이다. 기본값이 상황에 따라 달라진다. 블럭 태그 일 때 기본값 : block 인라인 태그 일 때 기본 값 : inline block (블록) display: block; 블록 레벨 요소로 만든다. 요소가 가로 전체 영역을 차지하며, 새로운 줄에서 시작한단. width, height와 같은 속성을 설정할 수 있습니다. inline (인라인) display: inline; 인라인 요소로 만든다. 요소가 콘텐츠의 흐름 중간에 들어가며, 너비와 높이를 가지지 않는다. width와 height 속성이 적용되지 않습니다. inline-block (인라인 블록) display: inline-block; 인라인 블록 요소로 만듭니다. ..
🔻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..
style 적용시 선택자 또는 속성이 충돌 날 때가 있다. 🔻1. 선택자 충돌🔻 같은 선택자를 중복하여 스타일을 적용할 때 충돌이 난다. 위에서 아래로 스타일을 적용하므로 적용하는 속성이 다르면 그대로 스타일 적용이 된다. > 큰 문제가 되지않는다. 상자 🔻2. 속성 충돌🔻 동일한 태그를 선택한 식별자들이 동일한 속성을 지정한다면 충돌이 발생한다. 작성된 순서에 따라 마지막에 작성한 속성이 적용된다. 상자 🔻3. 선택자 우선순위🔻 속성 충돌이 발생하면 코딩 순서에 상관없이 선택자 간의 우선 순서에 따라 속성이 적용된다. 점수로 계산되어 높은 점수의 선택자가 적용된다. 🔻선택자 점수 계산🔻 정밀도가 높을수록 점수가 높다.(동급일때만) 하위 선택자 점수가 높아도 상위 선택자를 넘어설 수 없다. 태그 선택자 ..
