CSS12 부모 속성을 상속하는 CSS 태그 모음 자식 태그에 특별한 속성이 지정되어 있지 않으면 자동으로 부모 속성을 물려받아 스타일링되는 태그들이 있다. color font-family font-size font-weight line-height list-style text-align text-indent text-decoration letter-spacing opacity visibility 보통 글자, 정렬과 관련된 css 태그들이 그대로 상속되는 듯 하다. 그리고 예외적으로 태그에는 color 속성이 상속되지 않는데, 상속되지 않는 속성을 강제로 상속시킬 때는 해당 css에 inherit 라는 속성값을 사용하면 된다. 더해서, 자식의 자식 요소에는 스타일링이 적용되지 않는다는 것도 알아두자. 구글 사이트로 이동하고 싶다면 여기를 클릭하세요! 2021. 8. 17. CSS 우선 적용 순서 같은 요소에 다른 CSS 속성이 중복 설정되어 있다면 어떤 것을 우선순위로 적용될까? 아래와 같은 순서로 우선순위가 적용된다. 속성값 뒤에 !important 가 붙어있는 속성 인라인 스타일(html 파일에서 스타일 직접 지정)로 적용되어 있는 속성 선택자에 id가 쓰인 속성 class, attribute, pseudo-class로 지정한 속성 태그 이름으로 지정한 속성 부모 요소에 의해 상속된 속성 이때 만약 똑같은 선택자가 아래에 반복해서 나오면 이전의 것을 덮어쓰게 된다. 이전의 것을 덮어쓰지 않으려면 !important를 사용해 주어야 한다. 안녕? 친구하지 않을래? 2021. 8. 17. CSS 선택자 모음 예전에 한번 간단하게 정리했던 적이 있는 CSS 선택자... 그 당시에 빠뜨린 것도 있고 해서 이번 기회에 더 자세히 정리해 보았다. 태그 이름 태그 이름은 그냥 이름만 기재해서 바로 스타일링이 가능하다. 해이나 월드 안녕, 친구하지 않을래? 클래스 & 아이디 클래스는 마침표(.)로 시작, 아이디는 샾(#)으로 시작한다. 해이나 월드 안녕, 친구하지 않을래? 자식 & 직속 자식 자식과 직속 자식은 css로 스타일링 해줄때는 아래와 같이 표기한다. 아래 예제에서 자식에 스타일링을 한 경우 해당 박스 안에 태그를 가지고 있는 모든 요소에 적용되는 반면, 직속 자식에 스타일링을 한 경우 다른 태그로 한번 더 감싸진 태그는 스타일링이 적용되지 않는다. 나는 box의 직속 자식입니다. 나는 box의 직속 자식은 .. 2021. 8. 16. 박스 사이즈를 결정하는 box-sizing : content-box | border-box; 오늘은 박스 사이즈를 결정하는 box-sizing 태그에 대해서 알아보려고 한다. 모르고 있어도 치명적인 문제는 발생하지 않지만, 알고 있다면 분명 꿀팁이 될 것이다. 문제 인식 아래와 같이 Hello world! 라고 적혀있는 div 박스 하나를 만들었다. 그리고 해당 박스의 사이즈를 가로 200px, 세로 100px로 설정하고 3px 두께의 테두리와 20px 내부 여백도 주었다. 그리고 나서 결과를 확인해보면, 보여지는 박스의 사이즈가 내부 여백(padding), 테두리(border) 사이즈까지 더해져서 초기에 설정해준 것보다 커져 있다. - 가로값 : width 200px + (padding 20 * 2) + (border 3 * 2) = 200 + 40 + 6 = 총 246px - 세로값 : he.. 2021. 8. 7. margin: 0 auto; 가운데 정렬이 되지 않을 때 가운데 정렬을 하는 방법은 여러가지가 있는데 나는 그 중에서도 text-align:center; 와 margin: 0 auto;를 가장 많이 사용하는 편이다. 그런데 간혹 margin:0 auto;를 적용해도 가운데 정렬이 되지 않을 때가 있다. 이러한 상황에서 체크해 볼 수 있는 세가지 방법에 대해서 소개하도록 하겠다. margin: 0 auto; 가운데 정렬이 되지 않을 때 해결방법 1. 가장 첫번째로 해야 할 일은 선언이 제대로 되었는지 확인해보아야 한다. 2. auto는 자동으로 사이즈를 설정해주는 것이다. 그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능하다. margin: 0 auto; 가 반응하지 않을 때에는 해당 영역의 가로 사이즈가 제대로 설정되어 있는지 확인해보고, 만약.. 2021. 8. 2. 아이템(div)의 너비 설정하기 - flex item 속성(2) 얼마 전에 flex css 속성들에 대해 포스팅하기로 했었는데 flex item 속성(1)까지 포스팅을 하고 그 후로 시간이 꽤 지났다. (이런 저런 일들로 너무 바빴...) 늦었지만 마무리는 해야하니까 오늘은 flex item 속성 제 2탄! 지난 번에 item 정렬과 순서를 설정하는 css를 알아보았다면 오늘 소개할 아이들은 item 너비와 관련된 css 들이다. 2020/10/29 - [개발자 꿈나무/CSS] - flex 기초 - flex란 무엇인가? 2020/11/06 - [개발자 꿈나무/CSS] - 아이템(div) 수직/수평 정렬, 줄바꿈 여부 설정하기 - flex container 속성(1) 2020/11/07 - [개발자 꿈나무/CSS] - 아이템(div) 정렬과 여백 설정하기 - flex .. 2021. 1. 1. div 박스 & png 투명배경 이미지에 그림자 효과주기 이벤트 페이지를 퍼블리싱하던 도중 css 스타일시트를 이용하여 그림자 효과를 주어야 하는 div 박스와 투명배경 png 이미지를 만났다. 이 두가지는 각각 그림자 효과를 적용하는 방법이 다른데 블로그에 정리해두려고 한다. div 박스 그림자 효과주기 그림자효과를 주려는 대상이 네모난 모양이라면 box-shadow 를 사용하여 그림자 효과를 줄 수 있다. .box { box-shadow : none; /* 그림자 효과를 없앰 */ box-shadow : x-position y-position blur color inset; /* 왼쪽부터 차례대로 가로 위치, 세로 위치, 그림자의 흐린 정도, 그림자 색상 가로 위치, 세로 위치는 양수이면 오른쪽, 음수이면 왼쪽에 그림자를 만들고, 블러값은 클수록 흐려짐 i.. 2020. 11. 29. border-collapse 이용하여 div 테두리 겹침 제거 border-collapse 속성은 표(table)의 테두리를 어떻게 보이게 할지를 결정하는 css 이다. div 3개를 연속으로 나란히 배치하려고 하였는데, 테두리 겹침 현상이 있어 border-collapse 속성을 이용하여 제거했다. 아래에 그 방법을 소개하려고 한다. 먼저 아래와 같이 box1 이라는 클래스명을 갖는 정사각형 div 세 개를 배치시키고, wrap_box1 이라는 클래스명의 div로 감싸주었다. 경계를 뚜렷하게 확인할 수 있도록 모든 div에 1px의 흰색 테두리를 설정했다. div 태그는 기본적으로 block 속성을 가지고 있기 때문에 아래와 같이 세로로 나란히 정렬된다. 정사각형 div 들을 가로로 정렬시키기 위해 display:inline-block; 속성을 사용하였다. (di.. 2020. 9. 18. 폰트 관련 CSS CSS 공부를 시작하며 이미 알고 있는 것도 있고, 예전에는 알았지만 잊어버린 것도 있고, 새롭게 알게 된 것도 있고 해서 글꼴 관련 스타일 시트를 정리해두고자 한다. 폰트 종류 지정하기 body {font-family: "맑은 고딕", 돋움, 굴림} /* 첫번째 글꼴이 없다면 다음 글꼴로 차례대로 넘어가며 적용 */ /* 글꼴이 두 단어 이상이라면 큰 따옴표로 묶어서 표시 */ 웹 폰트 사용하기 구글 폰트 (아래 링크) 페이지에 들어가서 link 항목을 복사하여 웹 폰트를 적용할 수 있다. fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.g.. 2020. 9. 11. CSS 여백 margin(마진) 속성 이해하기 margin 이란 정의된 테두리 요소 주위에 여백을 만들어 준다. 추가 TIP ) margin 과 padding 의 차이점 : padding은 공간 내부에서 형성, margin은 공간은 그대로 유지한 채 외부 공간을 확보하는 개념이다. padding은 안쪽 여백, margin은 바깥쪽 여백이라고 이해하면 된다. 테두리(border)를 경계로 나뉜다. margin 속성 margin-top : 상단 여백 margin-right : 오른쪽 여백 margin-bottom : 하단 여백 margin-left : 왼쪽 여백 - auto : 브라우저가 여백을 직접 계산한다 - pt, px, cm 등으로 길이 여백을 지정하거나 %를 사용하여 비율 여백을 지정할 수 있다. - inherit 속성값은 여백이 상위 요소에서.. 2020. 8. 29. 이전 1 2 다음
