HTML CSS15 CSS 이론 채워 넣기 - 10. flex box 1. flex-box Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. 2. Flexbox container 속성 2.1 flex-direction flex 컨테이너안의 flex item 들의 배치 방향을 설정한다. 기본값은 row 이다. 속성 설명 flex-direction: row; 좌에서 우로(ltr) 수평 배치된다. flex-direction 속성의 기본값이다. flex-direction: row-reverse; 우에서 좌로(rtl) 수평 배치된다. fl.. 2023. 9. 19. CSS 이론 채워 넣기 - 9. 반응형 웹 디자인(Responsive Web Design) 1. 반응형 웹 디자인이란? 반응형 웹디자인(Responsive Web Design) 은 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다. 2. viewport meta tag viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공한다. meta tag에서는 px단위를 사용하며 단위 표현은 생략한다. 복수개의 프로퍼티를 사용할 때는 쉼표(,)로 구분한다. 일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다. 프로퍼티 Description 사용예 width viewport 너비(px). 기본값: 980px width=240 height viewport 높이(px) height=800 initial-scale view.. 2023. 9. 19. CSS 이론 채워 넣기 - 8. 트랜스폼(Transform) 1. 트랜스폼이란? 트랜스폼(Transform) 은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다. 2. 2D 트랜스폼 (2D Transform) transform function 설명 단위 translate(x,y) 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. px, %, em 등 translateX(n) 요소의 위치를 X축으로 x만큼 이동시킨다. px, %, em.. 2023. 9. 18. CSS 이론 채워 넣기 - 7. 애니메이션 1. 애니메이션이란? 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다. transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다. 즉 transition 프로퍼티는 단순히.. 2023. 9. 18. CSS 이론 채워 넣기 - 6. 트랜지션 (transition) 1. 트랜지션 (transition) 이란? 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 따라 CSS 프로퍼티가 변경되면 프로퍼티 변경에 따른 표시의 변화(transition)는 지체없이 즉시 발생한다. ※ 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다. div 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동한다. 하지만 div:hover 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)는 트랜지션이 발동하지만 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 .. 2023. 9. 18. CSS 이론 채워 넣기 - 5. CSS 속성의 상속과 적용 우선 순위 상속 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. ※ 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다. 상속되지 않는 경우(상속받지 않는 요소 또는 상속되지 않는 프로퍼티), inherit 키워드를 사용하여 명시적으로 상속받게 할 수 있다. property Inherit width/height no margin no padding no border no box-sizing no display no visibility yes opacity yes background no font yes color yes line-height yes text-align .. 2023. 9. 15. CSS 이론 채워 넣기 - 4. text 관련 CSS 속성 1. font Shorthand font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory) font: italic small-caps bolder 16px/1.2 monospace; 2. letter-spacing 글자 사이의 간격을 지정한다. 3. text-align justify ( 양쪽 정렬 ) 양쪽 모두를 가지런하게 맞추기 위해서 띄어쓰기 간격이 조금씩 달라진다. 특히 영어의 경우 단어가 길면 간격이 많이 이상할 수 있는데, word-break 속성으로 조정할 수 있다. 4. white-space white s.. 2023. 9. 15. CSS 이론 채워 넣기 - 3. background 관련 속성 1. background-image 요소에 배경 이미지를 지정한다. body { background-image: url("http://poiemaweb.com/img/bg/dot.png"); } 2. background-repeat 배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다. 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. 이것은 background-repeat 프로퍼티의 기본값이 repeat 이기 때문이다. 속성 설명 repeat-x x축으로만 배경 이미지를 반복한다 repeat-y y축으로만 배경 이미지를 반복한다. no-repeat 반복하지않는다. background-image에 복수개의 이미지를 설정 b.. 2023. 9. 14. CSS 이론 채워 넣기 - 2. 다양한 CSS 단위 1. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 1.1 px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미하고 픽셀은 디바이스 해상도(resolution) 에 따라 상대적인 크기를 갖는다. 이와 같이 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식한다. 1.2 % % 는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 1.3 em em은 배수(倍數) 단위로 상대 단위이다. 요소에 지정된 사.. 2023. 9. 14. CSS 이론 채워 넣기 - 1. 셀렉터(Selector) 1. 기본적인 셀렉터 종류 전체 셀렉터 (Universal Selector) * { color: red; } 태그 셀렉터 (Type Selector) p { color: red; } ID 셀렉터 (ID Selector) #p1 { color: red; } 클래스 셀렉터 (Class Selector) .container { color: red; } 2. 어트리뷰트 셀렉터 (Attribute Selector) 패턴 설명 예시 셀렉터[어트리뷰트] 지정된 값을 갖는 모든 요소를 선택한다. a[href] { color: red; } 셀렉터[어트리뷰트="값"] 지정된 값이 일치하는 모든 요소를 선택한다. a[target="_blank"] { color: red; } 셀렉터[어트리뷰트~="값"] 지정된 값을 (공백으.. 2023. 9. 14. HTML 다시 배우기 - 4. hyperlink / list / 멀티미디어 태그 / form 1. hyperlink 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link) 라 한다. href 어트리뷰트 href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다. href 어트리뷰트에 사용 가능한 값 절대 URL: 웹사이트 URL (href=”http://www.example.com/default.html”) 상대 URL: 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”) fragment identifier: 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#.. 2023. 9. 9. HTML 다시 배우기 - 3. text 관련 태그 1. 제목 (Headings) 태그 Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다. 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 2. 글자 형태 (Text Formatting) 태그 2.1 b (non-semantic) bold체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다. 2.2 strong (Semantic) b tag와 동일하게 bold체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 갖는다. 웹표준을 준수.. 2023. 9. 8. 이전 1 2 다음
