본문 바로가기

WEB CODING/CSS20

:nth-child / :nth-last-child / :first-child / :last-child :nth-child / :nth-last-child / :first-child / :last-child :nth-child 사용방법 5번째에 있는 태그에 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 5번째에 위치해 있는 태그들에게 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 5번째에 위치해 있는 태그들에게 -1을 주었을 때 CSS를 주는 방법( 4번째 위치해 있는 태그들이 선택된다. ) 1 2 3 4 5 6 7 8 9 10 11 :nth-last-child 시용방법 뒤에서 부터 시작해서 7번째에 위치해 있는 태그에 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 뒤에서 부터 시작해서 7번째에 위치해 있는 태그들에게 CSS를 주는 방법 1 2 3 4 5 6 7 8 9 10 11 뒤에서부터 시작해서 7번째에 위치해 있는 태그들에게 -1을 주었을 때 CSS를 주.. 2020. 8. 17.
overflow 속성 overflow 속성 overflow 속성이란? overflow 속성은 레이아웃이 높이 값보다 내용이 넘치는 것을 조절해 줄 때 쓰인다. 예를들어서 해당 높이 값보다 내용이 넘치면 강제로 내용을 잘라주거나 스크롤을 만들어 주는 등 역할을 합니다. overflow 속성의 사용방법 overflow 속성에는 몇가지의 속성 값이 있습니다. 그 중 많이 사용하는 속성 값들을 정리해 보았습니다. hidden : 해당 높이 값이상으로 넘어가면 잘라줍니다. scroll : 해당 높이 값이상으로 넘어가면 잘라냅니다. 하지만 그 밑에 내용도 볼 수 있도록 스크롤을 만들어 줍니다. HTML What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting i.. 2020. 7. 4.
float 속성 float 속성 float 속성이란? float 속성은 해당 레이아웃을 띄워서 왼쪽, 오른쪽으로 레이아웃을 배치 시킬때 사용되는 CSS 속성이다. 어떻게 보면 position 속성의 absolute 속성 값과 비슷하지만 쓰이는 방식이 다르다. float 속성은 주로 overflow 속성의 hidden 속성 값과 같이 자주 쓰입니다. 그 이유는 메뉴나 리스트를 만들때 둘을 같이 쓰기 때문입니다. 부모 태그에는 overflow hidden을 쓰고 자식태그에는 float 속성에서 left 속성 값을 씁니다. float 속성 값의 사용방법 float 속성은 overflow : hidden과 같이 쓰는 것이 좋습니다. HTML What is Lorem Ipsum? What is Lorem Ipsum? CSS .float-left.. 2020. 7. 4.
position 속성 position 속성 position 속성이란? 레이아웃을 원하는 위치에 이동 시켜줄 수 있는 CSS 속성이다. position 속성의 사용방법 position 속성의 속성 값은 주로 relative와 absolute를 가장 많이 씁니다. 부모 태그에 relative를 해주고 움직일 레이아웃에 absolute를 해줍니다. 그러면 relative로 지정해준 공간 안에서 이동시켜줄 수가 있습니다. position 속성과 함께 쓰이는 속성은 위치를 지정해주는 속성이 있습니다. top / left / right / bottom을 같이 씁니다. HTML Box CSS .relative{position:relative; background:#fff; width:500px; height:300px;} .absolute{border:1px.. 2020. 6. 27.
display 속성 display 속성 display 속성이란? HTML 태그를 block 형식의 태그로 만들 것인지 inline 형식의 태그로 만들것이지 지정해줄 수 있는 CSS 속성이다. 이 속성을 적용하기 전에는 block 형식의 태그와 inline 형식의 태그가 정해져 있지만 이 속성을 사용하면 block 형식의 태그도 inline 형식의 태그로 만들어 줄 수가 있다. display 속성의 사용방법 displat 속성은 속성 값 중 block, inline, inline-block, none 이렇게 4개가 가장 많이 사용된다. block 속성 값은 레이아웃을 보이게 하는 역할과 block 형식의 태그로 바꾸어주는 기능을 합니다. inline 태그는 태그를 inline 형식의 태그로 바꾸어주는 역할을 합니다. inline-block은 i.. 2020. 6. 27.
border-radius 속성 border-radius 속성 border-radius 속성이란? 레이아웃의 외곽 모서리를 둥글게 만들어 주는 CSS 속성이다. border-radius 속성의 사용방법 border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 순으로 둥글게 만들어줄수가 있다. HTML border-radius 속성 CSS div{width:300px; height:300px; background:#fff; border-radius:30px 10px 20px 50px; border:1px solid #000;} p{padding:45% 25%;} 결과 화면 2020. 6. 27.
text-decoration 속성 text-decoration 속성 text-decoration 속성이란? 텍스트 태그에 밑줄 같은 것을 표시해주는 태그이다. 주로 링크 태그에 사용되며, 링크 태그에 기본으로 나오는 밑줄을 없애줄때 가장 많이 사용된다. text-decoration 속성의 사용방법 text-decoration 속성에도 다양한 것이 있지만, 그 중 가장 많이 사용되는 속성 값은 none이다. 그외에는 거의 사용되지 않는다. HTML 이것은 링크 태그이다. CSS a{text-decoration:none;} 결과 화면 2020. 6. 27.
list-style 속성 list-style 속성 list-style 속성이란? 목록 태그에서 항목들이 있는 글자들에 효과를 줄지 말지를 적용시키는 태그이다. list-style 속성의 사용방법 list-style 속성에는 여러가지가 있지만 대부분 잘 사용하지 않는다. 하지만 한 가지는 매우 잘 사용된다. list-style 속성에 none 이라는 값은 매우 많이 사용된다. 항목에 아무것도 효과를 주지 않을때 사용된다. HTML 리스트 리스트 리스트 CSS li{list-style:none;} 결과 화면 2020. 6. 27.
CSS가 적용되는 우선순위 CSS가 적용되는 우선순위 웹코딩 작업 중 CSS를 조작할 때 우선순위에 대해서 알아보겠습니다. 이 내용은 부모 태그와 자손 태그에 대한 개념이 있어야 이해가 빠를 것입니다. 1. 똑같은 id 명 또는 똑같은 class 명일 경우 나중에 입력한 CSS가 우선적으로 적용이 된다. 아래 소스를 보면 똑같은 class 명인데도 나중에 입력한 color:blue가 글자 색상으로 적용되는 것을 알 수가 있습니다. See the Pen css test 1 by uioweb (@uioweb) on CodePen. 2. !important는 필살기로 남겨 두자 아래 소스를 보면 1번에서 설명한 내용과는 반대로 같은 class 명인 데도 나중에 입력한 CSS가 아닌 가장 먼저 입력한 CSS가 적용된 것을 확인할 수가 있습니다. 이것은! impor.. 2020. 6. 18.