FrontEnd/CSS (18) 썸네일형 리스트형 #8. CSS 선택자(Selector) - 복합선택자 / 가상 클래스 선택자 CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제로 들어가보도록 하겠습니다. 아래 예제들은 codepen(Click!)에 코드를 붙여넣어 어떻게 실행이 되는지 확인할 수 있습니다. 복합선택자 일치선택자:: 조건을 만족해야 선택이 됩니다. 선택자가 span.orange인 경우에는 태그가 이면서 orange라는 클래스를 가지고 있어야 적용이 됩니다. /* css */ span.orange { color: red; } 사과 딸기 오렌지 당근 토마토 자식선택자:: 자식 요소를 선택합니다. (E > F) :: 꺽쇠(>)가 선택자의 기호로 사용됩니다. 아래 코드는 ul 코드의 자식들(li) 중 orange .. #7. HTML 문서에서 CSS를 로드하는 두 가지 방법 CSS 파일을 HTML에서 로드하기 위해서는 1) link 태그와 2) @import 사용하는 방법 두 가지가 있습니다. 1) link 태그 Hello 2) @import **주의해야 할 점 common1.css 파일부터 common4.css 파일까지 총 4개의 파일이 있다고 가정해보겠습니다. 첫번째 사례로 주어진 index.html은 독립적인 common*.css 파일들을 불러옵니다. 이것은 병렬방식으로 common1.css 파일부터 common4.css 파일까지 거의 동시에 읽어옵니다. 따라서 한 파일을 읽는데 1초가 걸린다고 가정하더라도 1초정도면 4개의 모든 파일을 불러올 수 있습니다. Hello 반면 아래와 같이 common1.css 는 common2.css를 import하고, common2.c.. #6. CSS Reset 사용방법 CSS Reset CSS를 사용하다보면 기본적으로 적용되어 있는 margin, padding 등과 같은 CSS값 때문에 불편함을 느낍니다. 이를 해결하기 위해 초기 body의 margin과 padding, h1 태그의 모양, li 태그의 모양 등 브라우저에서 기본적으로 제공하는 모습을 없애는 방법으로 CSS Reset을 활용합니다. 우선 아래의 사이트에서 copy html을 눌러 html에 붙여넣기를 해줍니다. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest netw.. #5. CSS에서 색깔을 변수로 사용하는 방법 # 이번 장에서는 CSS에서 색깔을 변수로 사용하는 방법에 대해 알아보도록 하겠습니다. # CSS를 작성하는데 색깔이 많은 부분에서 사용됩니다. 색의 변경이 필요할 때 하나하나 바꾸는 것이 아닌 # 같은 성질을 가진 색끼리 변수로 묶어서 변경할 수 있습니다. # 비전공자가 이해한 CSS CSS :: 색을 변수로 사용하는 방법 1) 기본 문법 변수명은 앞에 "--"를 붙여주고 뒤에 이름을 붙여줍니다. 적용하고 싶은 부분에 "var()" 함수를 놓고 안에 변수명을 입력해줍니다. 2) 사용 예시 # CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference # CSS reference: https://www.w3schools.com/cs.. #4. CSS FlexBox(Flexible Box module) 사용법 # 일명 flexbox라고 불리는 Flexible box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다. # 이번 장에서는 flexbox의 주요 기능에 대한 내용을 공부해보도록 하겠습니다. # 비전공자가 이해한 CSS Flexbox 일명 flexbox라고 불리는 Flexible Box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다. flexbox는 container에 속성값이 존재하고, item들에 각각 속성값을 지정할 수 있습니다. flexbox에는 방향이 존재합니다. main axis(중심축)와 cross axis(반대축) 입니다. cross axis은 mai.. #3. CSS "100%" vs "100vh" 의 차이점 # css를 만들 때 100% 와 100vh 등으로 사이즈를 사용하는 경우가 있습니다. # 이는 반응형 웹을 개발하는데 중요한 부분이기 때문에 짚어보도록 하겠습니다. # 반응형 웹은 tablet, mobile phone, desktop, labtop 등을 구분해 화면을 보여주도록 하는 방법입니다. # 비전공자가 이해한 CSS 100% vs 100vh ! 100%는 부모 태그의 100%를 사용한다는 의미입니다. 만약 부모 태그가 100%가 아니라면 자식 태그를 100%로 설정하더라도 이는 부모 태그 크기의 100%이지 화면의 100%가 아닙니다. 즉, 부모 태그가 화면의 50%라면, 자식 태그를 100%로 설정하더라도 이것은 부모 태그가 지정한 50%를 100% 보여준다는 뜻입니다. 결과적으로 화면의 50.. #2. CSS display 와 position 이해하기 ! # CSS를 활용하는데 가장 중요한 부분은 display와 position 입니다. # content와 box들을 어떻게 배치하고, 보여주는지에 따라 웹 페이지의 가독성이 달라지기 때문입니다. # 같은 content라도 가독성이 좋은 사이트가 더 많은 선택을 받는 것은 당연한 일입니다. # 이번에 배울 내용은 display와 position을 이해해 웹페이지의 가독성을 높이는 방법입니다. # 비전공자가 이해한 CSS 1. Display display 속성에는 inline, inline-block, block 이 세가지 속성값이 존재합니다. 각각 어떻게 다른지 살펴보겠습니다. 1) inline inline은 이미 선헌한 width와 height을 무시하고 content 자체만을 꾸며주는 것을 말합니다. c.. #1. CSS 정의 및 selector 사용법 # CSS의 정의와 selector를 알아보고, 기본적인 css 사용법을 알아보도록 하겠습니다. # CSS: Cascading Style Sheet # 비전공자가 이해한 CSS 1. CSS란 ? CSS는 Cascading Style Sheet의 약어입니다. Markup language가 실제 표시되는 방법을 기술하는 언어로, HTML과 XTML에 주로 쓰입니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높습니다. 1) Cascading Style Sheet CSS의 "Style Sheet"는 Web Browser에서 사용되는 스타일을 정의한 문서를 이야기합니다. "Cascading"은 사전적으로는 "연속"이라는 의미를 갖고 있습니다. 즉, 세부적으로 정의된 스타일이 있다면 정의된 내용.. 이전 1 2 다음
