IT 세상 해석하기

[CSS] 텍스트뒤 그림자효과 넣는 방법 By i!kohong(아이코홍) CSS 코드 text-shadow : h-shadow v-shadow blur color 예시 See the Pen PowmZMz by KorHWS (@korhws) on CodePen. h-shadow는 text기준 가로축, v-shadow는 text기준 세로축으로 +값을 가지면, h-shadow가로 오른쪽, v-shadow세로 아래쪽으로 그림자가 생성이 되며, -값은, h-shadow 가로 왼쪽, v-shadow세로 윗쪽으로 그림자가 생성되는것을 확인할 수 있습니다. blur는 그림자의 선명도를 설정할 수 있으며, 값이 작을수록, 그림자의 글자가 선명해지며, 값이 커질수록, 퍼지는 효과를 확인할 수 있습니다.

[CSS] 레이어 관련 속성 By i!kohong(아이코홍) 레이어 관련 속성 속성 설명 left 레이어의 왼쪽 좌표(px, pt, %, auto)를 지정한다. top 레이어의 위쪽 좌표(px, pt, %, auto)를 지정한다. width 레이어의 너비(px, pt, %, auto)를 지정한다. height 레이어의 높이(px, pt, %, auto)를 지정한다. background-color 레이어의 배경색(색상이나 색상코드)을 지정한다. background-image:url("") 레이어의 배경이미지(이미지 파일)를 지정한다. visbility 레이어의 표시 여부(visible이나 hidden)를 지정한다. z-index 레이어를 쌓는 순서(숫자나 auto)를 지정한다. 숫자가 높을수록 위에 표시된..

[CSS] 여백, 테두리 관련 속성 By i!kohong(아이코홍) 바깥 여백과 관련된 속성 [상속이 안되며, 모든태그에 적용이 가능하다.] 속성 설명 margin-top 바깥 위쪽 여백(cm, %, auto)을 지정한다. margin-right 바깥 오른쪽 여백(cm, %, auto)을 지정한다. margin-bottom 바깥 아래쪽 여백(cm, %, auto)을 지정한다. margin-left 바깥 왼쪽 여백(cm, %, auto)을 지정한다. margin 바깥 여백을 한번에 지정한다. 예시) margin : 2cm 1cm 3cm 2cm 안쪽 여백과 관련된 속성 [상속이 안되며, 모든태그에 적용이 가능하다.] 속성 설명 padding-top 내부 위쪽 여백(cm, %, auto)를 지정한다. padd..

[CSS] 글꼴, 텍스트, 표 관련 속성 By i!kohong(아이코홍) 글꼴 관련 속성 속성명 설명 예시 font-family 글꼴의 종류를 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. font-family : 굴림체 font-style 글꼴의 스타일을 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. font-style : nomal | italic | oblique font-variant 작은 대문자를 사용한다. 상속이 되며, 모든 태그에 적용이 가능하다. font-variant : nomal | small-caps font-weight 글꼴의 굵기를 지정한다. 상속이 되며, 모든 태그에 적용이 가능하다. font-weight : 100~900 | nomal(400) | bolder |..

[CSS] 홈페이지 글꼴 색과 배경을 원하는데로! 글꼴 색과 배경 관련 속성 By i!kohong(아이코홍) 글꼴 색 속성 속성명 설명 예시 color 글꼴 색을 지정한다. 상속이 되며 모든 태그에 적용이 가능하다. color:red color : #ff0000 color;rgb(255,0,0) 배경 관련 속성 속성명 설명 예시 background-color 배경색을 지정한다. 상속이 안 되며 모든 태그에 적용이 가능하다. background-color : red background-image 배경 이미지를 지정한다. 상속이 안 되며 모든 태그에 적용이 가능하다. background-image : none background-image : url(back.jpg) background-repeat 배경 이..

[CSS] 셀렉터(Selector) 표 정리 By i!kohong(아이코홍) 패턴&셀렉터(Selectors) 이름 의미 & 기능 예시문 ■ * 유니버설 셀렉터 (Universal Selectors) ◎ [모든 엘리먼트(요소)] 유니버설 셀레터는 모든 엘리먼트(요소)를 대상으로 하는 셀렉터이다. * { …… } ■ E 타입 셀렉터 (Type Selectors) ◎ [유형 E의 엘리먼트] 타입 셀렉터는 가장 단순한 셀렉터로 엘리먼트 명을 지정하여 그 엘리먼트에 스타일을 적용한다. p { …… } ■ E[foo] 속성 셀렉터 (Attribute Selectors) ◎ ["foo"속성을 가지는 E 엘리먼트] 어떤 엘리먼트 중에서 지정한 속성을 가지고 있는 엘리먼트에 대해서만 스타일을 적용한다. p [rel="e..

[CSS] 레이아웃의 단위 By i!kohong(아이코홍) em(em-height) → em과 유사하게 ex(x-height)가 있으며, 이 두 단위는 상속받는 엘리먼트에 대해 상대 크기로 계산됨 %(percentage) → em과 유사하게 지정되거나 상속받는 엘리먼트의 상대적인 백분율 크기를 의미한다. pt(point) → 1pt는 0.72inch와 동일한 절대크기이다. px(pixel) → 화면 해상도를 측정하는 dot 단위와 동일하다. em, px, % 장단점 단위 장점 단점 em ■ 아주 세밀한 2차원의 레이아웃 그리드를 만드는데 적합 ■ 문서 컨테이너에 대해 사용될 경우, body 부분의 사이즈가 확대/축소됨에 따라 레이아웃의 크기도 확대/축소되게 만들수 있음 ■ 화면에 보여질 엘리먼트의 크기를..

인라인 스타일 시트 [CSS] CSS의미와 작성하는 방법 By i!kohong(아이코홍) CSS = Cascading Style Sheet 자주 사용하는 스타일을 미리 정의해 두고 특정 이름으로 스타일을 호출하여 사용하는 방식의 코드 장점 코드의 관리와 수정이 쉬워진다. 웹 페이지를 로딩하는 속도가 빨라진다. 웹 페이지를 작성하는 시간이 줄어든다. 스타일 시트의 방식 인라인 스타일 시트 내부 스타일 시트 외부 스타일 시트 인라인 스타일 시트 태그의 속성 값으로 스타일 지정 인라인 스타일 시트 → 인라인 스타일 시트의 경우 외부 스타일 시트보다 우선적으로 적용됨 내부 스타일 시트 → 외부 스타일 시트와 함께 태그 스타일, 클래스 스타일, 네임드(Named)스타일을 만들 수 있다. 태그 스타일 특정 태그에 ..

설명이 필요없이 다음 사진을 보시면 아! 하실껍니다. 네이버 인터넷 개발자 모드에서 네이버 홈페이지에 CSS를 없애보았습니다. 어디서 봤는데 하시는분이라면, 가끔 오류가 났을때 보여지는 화면입니다. CSS가 작동을 안했다는 뜻이죠. 이 사진 하나만으로 CSS가 우리에게 보여주는 화려한 홈페이지를 작성해주는걸 느낄수가 있습니다. 뼈대인 HTML에 사용자들이 눈으로 잘 볼 수 있게 해주는 CSS!! 다음 글부턴 CSS에 대한 작성법과 기술을 적어보도록 하겠습니다.