프론트엔드 공부한 거 정리하기

요소 특성 변경 display 요소가 가지고 있는 inline, block 등 기본 성격을 변경할 수 있다. inline : 요소의 성격을 inline으로 변경 block : 요소의 성격을 block으로 변경 inline-block : 요소의 성격을 inline-block으로 변경. 인라인과 블록의 성격을 모두 가지며 인라인처럼 띄어쓰기, 줄바꿈 인식. line-height 값, width/height 값을 가질 수 있다. * 가로 중앙 정렬의 경우 인라인, 블록 적용 방식이 다 가능하나 띄어쓰기가 있는 경우 인라인 방식으로 정렬하는 것이 더 편하다. 'text-align:center' 상속되지 않으며 해당 요소에만 적용. 요소 숨김 visibility, opacity visible : 컨텐츠가 보임 *..

inherit (상속) : 지정된 영역에서 컨텐츠가 넘치지 않을 때 부모에 적용된 overflow가 없으면 상속 받지 못함 visible : 지정된 영역에서 컨텐츠가 넘치면 무조건 보여짐. hidden : 지정된 영역에서 컨텐츠가 넘치면 무조건 숨김. auto : 지정된 영역에서 컨텐츠가 넘치면 자동으로 스크롤이 생기고, 넘치지 않으면 스크롤 x scroll : 지정된 영역에서 컨텐츠가 넘치든 넘치지 않든 무조건 스크롤 생성. 가로 방향, x축으로 오버플로우 적용 웹의 특성상 컨텐츠가 넘치면 아래로 떨어지기 때문에 overflow-x 만으로 가로 스크롤을 만들기는 어려움. white-space:nowrap 으로 줄바꿈을 없애고 강제로 한 줄로 길게 만들어서 적용하는 방법이 있음. white-space :..

박스 모델 박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있다. 테두리(border) top, bottom, left, right 네 방향이 있고, style, width, color 세 속성이 있으며 각각의 스타일을 지정해서 디자인한다. border-top-style : 테두리 스타일 border-top-width : 테두리 굵기 border-top-color : 테두리 색상 한 방향의 속성 값을 축약해서 작성할 수 있다. border-top: 테두리 굵기px 테두리스타일 테두리색상 border-top: 10px solid #666 순서는 상관 없으며 띄..

가로 세로 영역 제어 width, height 블록 요소 : p, div, h1, header, ul, li, article, form ... 가로 값의 경우 부모 요소의 가로 값을 받음 일반적인 흐름에서는 블록 요소 옆에 다른 요소가 올 수 없음 자식으로 블록, 인라인 요소 올 수 있음 세로 값의 경우 자식 요소의 높이 값을 가져 옴 width, height로 제어 가능 인라인 요소 : span, img, a, em, input, strong ... 가로 값의 경우 자식(컨텐츠)의 값을 가져 옴 인라인 요소 옆에 다른 인라인 요소가 올 수 있음 자식으로 인라인 요소만 올 수 있음 세로 값의 경우 자식의 높이를 가져 옴. width, height로 제어 불가능 가로 세로 영역 제어 width, heigh..

::selection 가상선택자 :(의사 클래스 / pseudo-class) CSS에서 의사 클래스는 선택하고자 하는 HTML 요소, 아이디, 클래스 선택자에게 특별한 상태를 명시할 때 사용한다. /* 요소:의사클래스 { 속성 : 값 } */ 의사클래스 p:hover { color:#fff; } 동적 의사 클래스 :hover - 마우스를 위에 올렸을 때 :link - 링크 상태일 때 (기본값) :visited - 방문한 적이 있을 때 :active - 마우스로 클릭했을 때 :focus - tap키로 focus가 맞춰진 상태일 때 :가상선택자도 작성 순서에 따른 우선 순위를 가지기 때문에 디자인하고자 하는 바에 따라 체크해야 함. 상태 의사 클래스 :checked : input의 checkbox나 raid..

font와 text의 여러 특성들 font-family : 서체 종류 정확한 서체명 작성 (띄어쓰기, 인용부호, 대소문자 등) 상대방의 컴퓨터에 서체가 없는 경우를 대비해 3~4개 서체 추가 작성 (fallback fonts) 바탕체 종류로 끝나는 경우 제일 마지막은 serif로 작성 돋움(고딕)체 종류로 끝나는 경우 제일 마지막은 sans-serif로 작성 font-size : 서체 크기 font-weight : 서체 굵기 font-style : 서체 스타일 normal : 기본값 italic : 이탈릭체 oblique : 기울이기 (italic과 비슷) text-decoration : 밑줄 및 취소선 underline : 밑줄 overline : 윗줄 line-through : 가로줄 / 취소선 no..

기본 선택자 종류 1. 전체 ( * ) : 전체 선택자로 각각의 모든 요소에 대한 속성을 지정 2. important ( !important ) : 동일 요소에 적용되는 다른 규칙보다 우선 / style 뒤에 공백(space) 후 !important 를 추가 3. 타입 ( tagName ) : HTML 태그를 지정하여 선언 4. 클래스 ( .className ) : 하나의 웹페이지에 다양하게 사용 가능 / html 문서에서 속성값을 두 개 이상 가질 수 있음 불특정 다수의 꾸밈을 줄 때 주로 사용 5. 아이디 ( #idName) : 선택자에 고유한 이름을 부여하여 한 페이지에 하나의 이름으로만 존재, 요소에 대해 유일한 특성을 정의할 때 / 자바스크립트로 해당 요소를 조작할 때 6. 자식 ( li > a..

글자색 color color:color name; 컬러 네임으로 적용. color: #FFFFFF hex rgb 값으로 적용. (*6자리 기본) color: rgb(255, 255, 255); color: (red, green, blue) 값으로 적용. color: rgba(255, 255, 255, 0~1) color: (red, green, blue,alpha) 값으로 alpha는 불투명도 값. alpha 값이 낮을수록 투명해지고 높을수록 선명해짐. color: hsl(hue, saturation, lightness) color: hsla(255, 255, 255, 0~1) color: (hue/색상, saturation/채도%, lightness/명도%, alpha불투명도) 값으로 alpha는 불투..

CSS? Cascading Style Sheets의 약자 마크업 언어(HTML/XHTML)가 실제 화면에 표시되는 방법(디자인)을 기술하는 언어로 HTML문서의 레이아웃과 스타일을 정의한다. 파일형식은 '*.css'로 저장. CSS 기본 구조 Selector선택자 { Property 특성 : Value 값; } 사용(선언)방법 • 외부 : CSS style 내용을 CSS 파일로 따로 저장하여 페이지에 연결시키는 방법. 여러 개의 파일을 연결시킬 수 있기 때문에 공통/자주 사용되는 부분을 따로 저장하여 사용하는게 용이. 안에 로 작성. • 내부 : 안에 로 선언. • 직접 : 각 html 태그에 직접 style 속성 값으로 지정. CSS의 상속 지정된 요소뿐만 아니라 자식, 자손 요소에게까지 적용되는 성격..