[CSS] CSS box-shadow에 대하여 알아보도록 하자.

2021-04-24 css에서는 박스형 태그에 색상의 명도와 같은 옵션을 이용해서 그림자와 같은 효과를 줄 수 있다. 그 와 같은 속성이 바로 box-shadow인데 오늘은 이 box-shadow를 사용하는 방법을 알아보자. - 옵션 box-shadow: offset-x offset-y blur-radius spread-radius color 위의 코드가 줄 수 있는 모든 속성 값이다. 보라색으로 굵게 표시된 것이 기본 옵션이다. 우선 offset-x와 offset-y는 그림자의 위치를 설정하는 x축과 y축의 길이로써 쉽게 표현하면 그림자위치 가로 세로의 길이를 설정하는 옵션이라고 이해하면 된다. (두 값을 모두 0으로 두면 해당 속성을 준 박스 태그 요소의 바로 뒤쪽에 위치하게 된다.) color는 설..

• format_list_bulleted WEB/CSS
• · 2021. 4. 24.
• textsms

[CSS] CSS box-sizing에 대하여 알아보도록 하자.

2021-04-21 box-sizing은 css 속성의 너비 및 높이 속성을 정의하는 역할을하게 되며, content-box / border-box 두가지 옵션을 가지고 있다. -예제 ​ 위에는 예제 코드이며 아래는 그 결과물이다. 두 div 차이는 box-sizing 옵션을 서로 상이하게 준 것 외에는 다른 css 속성은 모두 동일하다. 위의 결과를 보았을때 누가봐도 content-box속성을 부여한 빨간색 div가 조금 더 커보이는 것을 확인할 수 있다. 그이유는 무엇일까? 사실 이유는 간단하다. content-box는 정의한 초기 높이와 넓이 속성이 콘텐츠 영역에 해당하고 내부 여백과 테두리는 포함하지 않는다. 다시 말하면 전체 div 영역에 내부여백을 포함하지 않기 때문에 내부여백을 부여할 수록 ..

• format_list_bulleted WEB/CSS
• · 2021. 4. 21.
• textsms

[CSS] CSS 선택자 :hover 에 대하여 알아보기

2021-04-20 :hover 선택자는 유저의 커서(마우스 포인터)가 요소 해당 선택자 위에 올라가 있으면 선택됩니다. - 예제 코드 Hello world ​ 예제 코드는 일반적인 버튼을 만들어 둔뒤 :hover로 추가 정의를 해주었다. 이후 결과를 확인하면 해당 버튼에 마우스 커서가 없을시에는 일반적인 버튼이었다가 마우스커서를 해당 버튼에 위치시키면 css로 부여해준 배경색 속성이 부여되게 된다. 메인 이미지 출처: Photo by Jakob Owens on Unsplash

• format_list_bulleted WEB/CSS
• · 2021. 4. 20.
• textsms

[CSS] CSS Pseudo-Elements(가상선택자) ::before / ::after

2021-04-16 가상 선택자는 말 그대로 가상의 요소를 추가 선택한다고 이해할 수도 있는데, 해당 표현만으로는 가상 선택자를 표현하기가 어렵다. 떄문에 오늘은 구체적인 예를 들어 가며 가상 선택자 중 ::before / ::after 이 두 가지를 알아보도록 하자. - ::before ::before는 단독으로 사용되는 것이 아닌 다른 선택자 뒤에 붙어 사용하게 된다. 해당 가상 선택자 ::before의 역할은 요소의 내용 앞에 일부 내용을 삽입하는 데 사용할 수 있다. 아래의 예제를 보자. Hello World1 ​ ::before에 들어갈 가상의 내용은 content라는 속성에 값을 넣어주면된다. 예제에서는 특수문자 별을 넣어두었으며, 추가적인 css 속성들을 부여해주었다. 결과를 확인하면 아래와..

• format_list_bulleted WEB/CSS
• · 2021. 4. 16.
• textsms

[CSS] CSS Attribute Selectors(속성 선택자) 알아보기

2021-03-28 속성 선택자는 말 그대로 특정 속성 또는 속성 값이 있는 HTML 요소의 스타일 선택하여 지정할 수 있다. 이와 같은 속성 선택자를 사용하는 방법을 알아보자. - a[Target] 속성 선택자는 보통 앞에 태그와 그 뒤에 [ ]가 오게 되며, [ ] 안에 선택하고자 하는 속성을 적어 주면 된다. 예제에서는 div [id="testDiv1"]와 같이 선택하였다. Hello1 Hello2 Hello3 Hello4 위의 코드의 결과로는 아래와 같은 결과로 나타난다. - CSS [attribute~="value"] Selector 속성 선택자는 =기호를 다른 특수 문자와 조합하면 다양한 기능을 가지게 된다. 우선적으로 ~와 결합한 ~=는 지정된 단어를 포함하는 속성 값을 가진 요소를 선택하는..

• format_list_bulleted WEB/CSS
• · 2021. 3. 28.
• textsms

[CSS] CSS padding을 통한 내부 여백 부여하기

2021-03-27 CSS에서의 padding 속성은 정의된 테두리 내에서 요소의 콘텐츠 주위에 공간을 생성하는 데 사용된다. CSS를 사용하면 요소의 내부의 여백을 조절 할 수 있으며, 요소의 각 측면 위 / 오른쪽 / 아래 / 왼쪽에 패딩을 설정하는 속성이 있다. - padding(top / right / bottom / left) 앞서 말했듯이 위아래 / 좌우 영역에 각각 padding 내부 여백을 부여할 수 있으며, 아래는 [padding-left: 30px; padding-top: 30px;] 와 같이 내부 여백 옵션 30px을 부여하는 코드이다. Area1 Area2 아래의 이미지를 보자. 기존의 div(Area2) 텍스트를 확인해보면 위와 왼쪽에 30px씩 여백이 생겨 그만한 공간만큼 텍스트..

• format_list_bulleted WEB/CSS
• · 2021. 3. 27.
• textsms