2. Front-end/2-2. CSS

CSS - [ 속성(position / 요소 쌓임 순서) ]

이번에는 요소를 원하는 위치에 배치할 수 있는 position 속성을 포함해서 여러 가지 속성들을 살펴보자. position : 요소의 위치 지정 기준. relative는 요소 자신을 기준으로, absolute는 위치상 부모 요소를 기준으로, fixed는 뷰포트를 기준으로 한다. 요소를 배치할때는 기준을 잡고 나서 위치 값을 설정해야 한다는 사실을 기억하자! position을 이용해 기준을 잡고 나면, top bottom left right 등 의 속성(값이 아니고 속성!!)을 이용해 위치 값을 설정할 수 있다. absolute, fixed가 지정된 요소는 display 속성이 block으로 변경되고, 가로 너비가 최소한으로 줄어들게 된다. 2번 요소에 자신을 기준으로하는 relative 값을 주고, t..

CSS - [ 속성 (배경) ]

이번엔 css의 배경과 관련된 내용을 살펴보자!! background-color : 요소의 배경 색상을 지정하는 속성으로 기본값은 투명한 transparent이다. background-image : 요소의 배경 이미지 삽입 속성. url("경로") 와 같이 값을 넣어주면 된다. background-repeat : 요소의 배경 이미지 반복 속성으로 기본값은 바둑판식으로 반복하는 repeat이다. repeat-x는 이미지를 수평 반복, repeat-y는 이미지를 수직 반복, no-repeat는 반복 없는 값이다. background-position : 요소의 배경 이미지 위치 속성. top, bottom, left, right, center와 같이 방향으로 입력하거나 px, em, 등 단위로 지정하는 총 2..

CSS - [ 속성 ]

CSS에서 속성은 Properties로, HTML의 속성 Attributes와는 표현이 약간 다르다. 크게 박스 모델, 글꼴 문자, 배경, 배치, 플렉스, 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터로 나눌 수 있다. 1. 너비 width 와 height는 요소의 가로 세로 너비를 지정해준다. span 은 인라인 요소로 기본값은 포함한 콘텐츠 크기만큼 설정되고, div 는 블록 요소로 기본값은 가로는 부모 요소의 크기만큼, 세로는 포함한 콘텐츠 크기만큼 설정된다. 인라인 요소는 가로 너비가 최대한 줄어들려 하고, 블록 요소는 최대한 늘어나려 한다는 게 차이점이다. 그리고 인라인에는 width와 height를 설정할 수 없다는 점 다시 상기하자!! max-width, max-height나 min..

CSS - [ 스타일 상속 ]

스타일 상속에 대해 알아보자. 예를 들어 사진과 같은 코드가 있을때, 호랑이, 사자, 코끼리의 부모 요소로 animal 클래스를 가진 div 요소를 확인할 수 있다. .animal 선택자에 스타일을 주면 동물 부터 호랑이, 사자, 코끼리 까지의 코드에 모두 스타일이 적용된다. animal 클래스에 css를 적용했을 때 자식 요소, 나아가 하위 요소들에 영향을 미치는 것을 스타일 상속 이라고 한다. 즉 부모 요소 혹은 조상 요소로부터 적용된 스타일이 자식이나 하위 요소로 상속되어 적용되는 것을 css의 스타일 상속 이라고 한다. 모든 요소가 상속 되는 것은 아니고 글자/문자 관련 속성들이 상속된다. 물론 여기에도 예외는 있음! 실질적으로 상속되지 않는 css 내용도 강제적으로 상속시킬 수 있는 강제 상속도..

CSS - [ 선택자 ]

선택자 { 속성: 값; } CSS에서 중괄호 영역 앞쪽에 작성하는 부분을 HTML의 특정한 부분을 선택한다는 의미에서 선택자라고 부른다. HTML에서 선택자에 해당하는 부분에 중괄호 영억의 속성과 값들이 적용된다. 여기엔 크게 5가지 종류가 있다. 1. 기본 전체 선택자 : * 로 사용하며 HTML의 모든 요소를 선택한다. 태그 선택자 : 태그 이름에 해당하는 요소를 선택한다. 클래스 선택자 : HTML class 속성의 값에 해당하는 요소를 선택하며 .클래스명 과 같이 작성한다. 아이디 선택지 : HTML id 속성의 값에 해당하는 요소를 선택하며, #클래스명 과 같이 작성한다. 2. 복합 (기본 선택자를 조합해서 사용) 일치 선택자 : 두 개의 선택자를 동시에 만족하는 요소 선택. ex) span.o..

CSS - [ 선언 방식 ]

CSS의 선언 방식에는 크게 4가지가 있다. 1. 내장 방식 의 내용으로 스타일을 작성하는 방식으로 HTML의 HEAD 요소에 작성한다. 별도의 CSS 파일이 필요 없다는 장점이 있지만 유지보수 측면에서 단점이 많다. 즉 권장하지 않는 방식임!! 2. 링크 방식 로 외부 CSS 문서를 가져와서 연결하는 방식이다. 3. 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식으로 선택자가 없다. 우선순위가 높아 추후에 유지보수 하는데 불편함이 있다! 역시 권장하지 않는 방식이다. 4. @import 방식 CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식이다. 즉 HTML에 직접적으로 CSS를 연결하는 게 아니고, 이미 HTML과 연결된 CSS 파일에 ..