윤민상 블로그

CSS 포지셔닝과 주요 속성들 box-sizing 속성 - 박스 너비 기준 정하기 content-box(너비 값, 기본 값) | border-box(테두리까지포함, 마진은 포함x) float 속성 - 왼쪽이나 오른쪽으로 배치하기 left | right | none clear 속성 - float 속성 해제하기 none | left | right | both left는 left 해제, right는 right 해제, both는 둘다 해제 로렘 임숨(Lorem Ipsum) : 의미없이 내용을 채워주는 것 http://guny.kr/stuff/klorem/ 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레..

CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 : 블록은 한줄, 인라인은 화면에 표시되는 콘텐츠만큼만 영역 차지 display : none | contents | block | inline | inline-block | table | table-cell 등 테두리 관련 속성들 border-style 속성 - 테두리 스타일 지정하기 border-width 속성 -테두리 두깨 지정하기 | thin | medium | thick border-color 속성 - 테두리 색상 지정하기 border 속성 - 테두리 스타일 묶어 지정하기 | | border-radius 속성 - 박스 모서리 둥글게 만들기 | 타원형태는 border-top-left-radiuse :

웹에서 색상 표현하기 16진수 표기법 #ffff00(#ff0) rgb와 rgba 표기법 rgb(255,0,0), rgba(255,0,0,0.5) (a는 알파, 투명도, 1은 완전 불투명, 0은 완전 투명) hsl과 hsla 표기법 hue(색상), saturation(채도), lightness(밝기) 색상 이름 표기법 red, yellow, black 색상 추출 사이트 이용하기 https://www.webfx.com/web-design/color-picker/ Color Picker by WebFX – Free HTML Color Chooser This sample text has a font color of #c93200 Text here Background Color: www.webfx.com 배경 색..

글꼴 관련 스타일 font-family 속성 - 글꼴 지정하기 font-face 속성 -웹 폰트 사용하기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com font-size 속성 -글자 크기 조절하기(절대크기, 상대크기, 크기, 백분율) 보통 크기 사용(em, ex, px, pt) font-weight 속성 -글자 굵기 지정하기(normal(400), bold(700), bolder, lighter, 100~900) font-variant 속성 -작은 대문자로 표시하기(normal, small-caps) font-style 속성 ..

CSS(Cascading Style Sheets) 선택자(selector) : 선택을 해주는 요소( ex) p{padding:10px}에서 p가 선택자) 스타일 시트 : 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 ㅏㅎㄴ 군데 묶어 놓은 것 1. 내부 스타일 시트 : head태그안에 style태그를 적용하는 것 2. 외부 스타일 시트 : 외부에서 스타일을 가져오는 것(head안에 link태그로) 3. 인라인 스타일 : 간단한 스타일 정보라면 스타일을 적용할 대상에 직접 표시 블루베리 주요 선택자 전체 선택자 : * 태그 선택자 : 태그 클래스 선택자 : .클래스 id 선택자 : #id 그룹 선택자 : 둘 이상 요소에 같은 스타일 적용하기(h1,h2) 캐스케이딩 스타일 시트(CSS) 캐..

마크업 : 화면에 표시할 내용에 태그를 사용해서 역할을 구별해 주는 것 특수기호 사용하기 https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org meta 리스트 ol에는 type, start 속성이 있다(type="a", start="3") dl, dt dd태그 - 설명 목록 만들기 표 table, thead, tbod, tfoot tr 행 th, td 열 caption 제목 colspan, rowspan(열합치기,행합치기) colgroup, col : 스타일(크기, 색) 이미지 figure, figcaption -이미지에 설명 글 붙이기 map, area, usemap - 이미지 맵 지정하기 form..