728x90 프로그래밍/CSS6 [CSS] ID와 Class의 차이 🌈 ID 와 Class 의 차이? - Class는 중복 사용이 가능하다. 동일한 클래스명을 여러 곳에 사용해도 무방하다. 하지만 ID 는 그렇지 않다. 한 개의 ID는 딱 한 번만 사용이 가능하다. - Class는 한 요소에 여러 개의 클래스명을 적용해서 사용할 수 있다. 하지만 ID는 그렇지 않다. 한 요소에 하나의 ID 만 적용이 가능하다. ID Class 중복사용 가능 불가능 한 요소 갯수 제한 한 요소에 한 아이디만 사용 가능 한 요소에 여러개 클래스 사용 가능 💡 선택자 우선 순위 : !important>인라인 > ID > Class > Element 1. 속성값 뒤에 !important 를 붙인 속성이 가장 우선수위가 높다. Ex. p {color: blue ! important;} 2. H.. 2022. 4. 28. [CSS] 다시 정리해보는 박스 구성 요소 (Margin, Border, Padding, Content) 🌈 박스를 구성하는 요소 - Content, Padding, Border, Margin 1. Border (테두리) h1 tag 에 border의 빨간 선을을 추가하여 확인해보면 아래와 같이 h1 tag의 테두리를 확인할 수 있다. 💡 테두리를 점선으로 만들어보기 border의 속성값 중 테두리 스타일에 dotted라는 속성을 넣어주면 된다. 💡 테두리를 둥글게 만들어보기 border-radius 를 이용해 테두리를 둥게 만들어볼수도 있다. 💡 테두리에 그림자 넣기 box-shadow 를 이용해 테두리에 그림자도 넣을 수 있다. 2. Margin (바깥여백) tag에 margin을 주어 border와의 차이점을 먼저 확인해보자. 살구색으로 표시되어 있는 border의 바깥 부분이 margin 인 것을 .. 2022. 4. 28. [CSS] 줄 바꿈이 되는 박스와 옆으로 붙는 박스 ( block, inline, inline-block) 🌈 줄 바꿈이 되는 박스 block VS 옆으로 붙는 박스 inline, inline-block HTML 태그 중에 어떤 태그는 줄바꿈이 되고 어떤 태그는 줄바꿈이 되지 않는다. 우리는 줄바꿈이 되는 박스를 block 박스, 줄바꿈이 일어나지도 않고 맘대로 크기지정을 할 수 없는 박스를 inline 박스라고 부른다. 그리고 이 두가지 속성이 섞인 박스도 존재하는대 이는 inline-block 박스라고 부른다. 줄 바꿈이 되는 대표적인 태그 -> , , 줄 바꿈이 되지 않는 대표적인 태그 -> 💡 아래 표를 기억해두면 코드를 작성하는데 훨씬 유용할 것! block inline-block inline 줄바꿈 여부 줄바꿈이 일어남 줄바꿈이 일어나지 않음 줄바꿈이 일어나지 않음 기본적으로 갖는 너비 100% 글.. 2022. 4. 28. [CSS] CSS란? 🌈 CSS란? CSS는 Casacading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다. HTML이 구조를 담당한다면, CSS는 내부와 외부를 꾸미는 역할을 담당한다. CSS 는 선택자와 선언부로 구성된다. 선택자는 태그, 아이디, 클래스와 같은 HTML요소를 가리키고 선언부에는 글자 색상, 크기와 같은 속성 이름과 값이 포함된다. 선택자 {속성:값; 속성:값; ...} 2022. 4. 27. [CSS] 마진(margin) 그리고 패딩(padding) 이란? 🌈 마진 (margin) "바깥 여백" 마진은 요소 주변 여백을 뜻한다. 마진의 크기를 조절해 다른 요소 사이들 간의 간격을 남겨 User-friendly한 UI를 만들 수 있다. 💡 사용법 𝟏. border 를 기준으로 위 / 오른쪽 / 아래 / 왼쪽 따로 지정하는 방법 margin-top : 위 여백 margin-right : 오른쪽 여백 margin-bottom : 아래 여백 margin-left : 왼쪽 여백 𝟐. 4가지 방향을 한 번에 지정하는 방법 margin : [위] [오른쪽] [아래] [왼쪽] * margin은 음수 값이 적용된다. * auto 를 사용하여 가운데 정렬이 가능하다. (사용법: margin: auto; margin: 0 auto;) 🌈 패딩(padding) "안쪽 여백" p.. 2022. 4. 27. [CSS] Position: relative, absolute 🌈 CSS Position 이란? HTML 요소가 웹 페이지 상에서 위치를 결졍하는 방식을 설정하는데 아래와 같이 다섯개로 정할 수 있다. 1) static postion 2) relative position 3) fixed position 4) absolute position 5) sticky poisition 💡block & inline block : block 구조는 한 줄을 모두 차지 (, ) inline: 컨텐츠 크기 만큼만 차지 () 💻 Static position HTML의 요소를 위치하는 가장 기본적인 방식은 정적 위치 지정방식이다. static 방식으로 설정된 요소는 top, right, bottom, left 속성 값에 영향을 받지 않고, 단순히 웹 페이지의 흐름에 따라 차례대로 요소들.. 2022. 4. 27. 이전 1 다음 728x90
