본문 바로가기

CSS

 (19)
Lesson #6 스타일 시트를 읽기 쉽게 정리하는 방법 Lesson #6 스타일 시트를 읽기 쉽게 정리하는 방법 이 포스팅의 목차 1. 본격적인 CSS 작성 시작전에 소개 및 목차 작성하기. 2. 자주쓰는 색상과 폰트 작성해두기. 3. 주석으로 영역 구분을 하고 목차의 제목을 사용한다. 4. @rule을 상단에 둔다. 5. CSS 구체성을 활용한 계층구조 적용 오늘은 제목 그대로 스타일 시트를 읽기 쉽게 정리하는 방법에 대해 포스팅 해보겠습니다. 웹페이지를 렌더링할 떄 CSS코드를 해석하는 건 컴퓨터지만 CSS를 만들고 편집하는 건 우리의 일이죠. 개발 중에는 쉽게 코드가 지저분해지고 CSS규칙 사이의 상호관계, 캐스케이딩 순서, 심지어 수정할 CSS의 위치조차 파악하기 어려워 질때도 있습니다. 제가 알려드리는 5가지를 참고하셔서 작업하는 동안 코드를 잘 정..
Lesson #5 CSS FlexBox ( 플렉스박스 1) Lesson #5 CSS FlexBox ( 플렉스박스 ) 이 포스팅의 목차 0. 플렉스박스 소개. 1. 플렉스박스란 2. 방향, 흐름, 시각적인 순서 처리 2-1.flex-direction 2-2. flex-wrap 2-3. flex-flow CSS Flexbox 00. 플렉스박스 소개 flex모듈에 대해 소개해드릴께요. grid Layout과 함께 유동적인 레이아웃 모듈인 Flrex box(플렉스박스)모듈에 대해 소개합니다. 이 Flexbox(플렉스박스)모듈은 복잡한 웹 페이지와 응용프로그램들을 구현할 수 있도록 디자인된 새로운 레이아웃입니다. CSS를 많이 다뤄본 분들이라면 본인들만의 노하우로 수직중앙 정렬(Vertical centering)을 하고 계실거에요. 이처럼 중요하고 필요하지만 조금은 허술..
Lesson #4 CSS Box Model ( 박스모델 ) Lesson #4 CSS Box Model ( 박스모델 ) 이 포스팅의 목차 1. 박스모델의 개념 2. padding과 margin의 값 사용법과 순서 1. 박스모델의 개념 CSS에서는 디자인과 레이아웃에 대해 ‘박스모델’이라는 용어를 사용합니다. CSS 박스모델은 본질적으로 HTML 요소를 감싸는 ‘상자’입니다. 좀더 설명을 드리자ㅁ면, 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용되는 개념입니다. 박스 모델을 이용해서 웹 문서의 전체 레이아웃을 정의할 수 있고, 요소들을 원하는 위치에 배치하여 화면을 디자인할 수 있습니다. HTML5의 태그들 중에서 , 등을 제외하면 거의 모든 태그가 박스 모델의 개념에 적용됩니다. 아래 이미지는 박스모델을 보여줍니다. w3schools.com의..
Lesson #3 CSS Combinators (결합자, 조합 선택자)에 대해서 알아봅시다. 이 포스팅의 목차1. CSS combinators(결합자)의 의미.2. CSS combinators(결합자)의 종류와 사용법. 1. CSS Combinators(결합자)의 의미. CSS 관련 책을 보다보면 Combinators를 한글로는 '결합자' 혹은 '조합 선택자'라고 이름지어져 있습니다. Combinators가 뜻하는 바는 무엇일까요? 어원의 사전적 의미를 잠깐 파악 하고 들어가보도록 합시다.  제 나름의 추측으로는 '결합되다'라는 의미를 갖고있는 Combin에 접미사 'or'이 붙어서 만들어 진것이 아닐까 싶습니다.그리고 CSS 관련 책에서는 선택자(selector)들을 복합적으로 조합하는 방법을 제공하므로 '조합 선택자'라고 표현하기도 합니다. w3shools닷컴에서는 CSS Combinator..
Lesson #2 CSS 선택자에 대해서 알아봅시다. 이 포스팅의 목차 1. 선택자 (selector) 2. 속성 및 값 (properties and values) 3. Lengths 4. Recap CSS 선택자 Selectors 속성을 적용할때, 요소를 선택하는 구문을 '선택자'라고 합니다. Type Selector 요소 선택자 : HTML 태그 이름으로 선택합니다. span {color:#0000ff;} Class selector 클래스 선택자 : HTML 태그에 선언한 class 이름으로 선택합니다. class 이름은 여러번 재 사용이 가능하여, 일반적으로 사용되는 방법입니다. 이름있는 DIV 이름있는 span .nameDiv { font-size:200%; } id selector 아이디 선택자 : HTML 태그에 선언한 id 이름으로 선택합니다...
Lesson #1 CSS ( Cascading Style Sheet ) 기본적인 특징과 적용방법, 적용 우선순위 알아보기. Lesson #1 CSS ( Cascading Style Sheet ) 기본적인 특징과 적용방법, 적용 우선순위 알아보기. 이 포스트의 목차 1. CSS 기본 특징. 2. 적용(연결) 방법 3. 우선순위 CSS 기본 특징 CSS는 HTML 문서를 보기좋게 만드는, 디자인 코드라고 생각하시면 쉽습니다. CSS 이름에서 짐작해볼수 있듯이 Cascading의 의미는 폭포 같은, 계속되는, 연속적인 뜻을 가지고 있으며 가장 큰 특징입니다. 계단식 연결을 의미 한다고 생각하세요. 브라우저가 따라가는 계층 구조는 외부, 내부, 인라인 입니다. 특정 계층 구초를 따르기 때문에 상위 요소에서 지정한 속성이 하위 요소까지 연속적으로 적용된다는 의미라고 생각하시면 쉽습니다. 폭포가 위에서 아래로 떨어지는 듯한 느낌으로 적..
[CSS3] transition 속성 전환 transition 속성 전환 transition은 background, color, height, witch, transformation 등의 속성들에 애니메이션을 적용 하는것. transition : property duration timingfunction; property : 애니메이션 시킬 속성을 사용함. duration : 시작해서 끝날 때까지 시간을 초 단위로 지정함. timingfunction : 속도 변화를 기술하는데 큰 차이를 느끼기 어렵지만 다음 항목들이 있다. linear : 등속 cubic-bezier(0, 0, 1, 1)과 같음. ease : 느리게 시작했다가 빨라졌다 다시 느려짐. cubic-bezier(0.25, 0.1, 0.25, 1)과 같음 ease-in : 점점 빨라짐...
[CSS3] 2D Transform 2D Transform 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다. h1{ width:300px; height:300px; margin:20px; padding:20px; border:1px solid #dddddd; } .transformTest_translate{ background:#e8e8e8; transform : translate(500px, -360px); -moz-transform : translate(500px, -360px); -webkit-transform : translate(500px, -360px); -ms-transform : translate(500px, -360px); -o-transform : trans..

티스토리툴바