[CSS] CSS margin 속성을 통한 외부의 여백 / 가운데 정렬 방법

2021-03-26 margin 한국에서는 주로 이익잉여금 정도로 해석되곤 하지만 사전적 의미로는 이보다 여유/ 가장자리라는 의미가 강하다. 해당 margin은 css에서 각 요소들에 외부 여백을 부여하거나 요소의정렬 수단으로 사용된다. 이 margin의 사용방법을 알아보도록 하자. - 예제 코드 아래는 예제로 사용될 코드이다. 기본적인 div태그에 영역 속성을 부여해주었으며, body 여백공간들을 제거한 상태이다. Area 실행시 아래와 같은 브라우저 화면이 나타난다. - margin(top/right/bottom/left) 마진에는 각각 top / right / bottom / left 옵션을 부여할 수 있다. 각각 단어에서도 느껴지듯이 태그의 위아래 좌우에 부모 태그를 기준으로 margin을 부여할..

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

[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류)

2021-03-23 Combinators 선택자들은 각 선택자들의 관계를 설명하며, 특정한 부호로 이들과의 관계를 규정하며 표현할 수 있다. - descendant selector( " " ) descendant 한국어로 번역하면 자손이라는 의미를 가지고 있다. 때문에 [ 부모선택자 자손 선택자 ]라고 지정 시 해당 부모의 모든 자손이 선택된다. (space 키 즉 하나의 빈공 백문자가 기호로 사용된다.) AAA BBB BBB-1 BBB-2 BBB-3 CCC DDD 위의 예제는 가장 상위 부모태그 outset을 기준으로 하위에 있는 li 태그를 선택하였다. 그 결과 outset이 감싸고 있는 모든 li 태그들이 영향을 받는 것을 확인할 수 있다. - child selector( " > " ) child ..

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

[CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기.

2021-03-18 처음에는 top: 50%의 값과 bottom: 50% 의 값이 서로 같은 영역을 차지할 거라고 생각하지만 막상 해당 옵션을 가지는 태그들을 비교해보면 그렇지 않다. 오늘은 그 이유를 알아보도록 하자. - 예제 아래는 예제 코드로써 부모 태그 안에 두 자식 / 들이 위치하고 있다. 이후 자식태그들에게 옵션값으로 top: 50% / bottom: 50% 값을 부여해주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 서로 다른 영역을 차지하고 있는 것을 확인할 수 있다. 여기서 의문점이 발생한다 똑같이 상단(top) or 하단(bottom)에서 시작하는데 막상 50%를 매개 값으로 주면 각 div 태그들이 차지하는 영역이 달라진다는 ..

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

[CSS] CSS bottom 속성을 이용한 수직 위치 변경 방법 알아보기.

2021-03-17 top 속성이 있다면 bottom 속성도 있다. 이는 마찬가지로 수직 위치를 변경하는 태그로써 position: static을 제외한 이외의 position 들의 수직상의 위치를 조정하기 위해 사용한다. - bottom: 0px or 100px 우선 부모 div태그에 relative를 적용함으로써 자식 태그들의 기준점이 될 수 있도록 position을 잡아주었다. 이후 각 자식 태그 'two' / 'three' 에게 각각 top : 0px / top : 100px 을 부여해 주었다. (기존의 top 예제와 같다) 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 bottom: 0px에 가까울수록 bottom의 아래쪽과 가까워지며, 매개..

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

[CSS] CSS Top 속성을 이용한 수직 위치 변경 방법 알아보기.

2021-03-16 Top 속성은 static position을 제외한 이외의 position의 각 옵션 속성들의 부모 태그를 기준으로 수직으로 위치를 조정할 수 있게 해주는 속성이다. top에 주어지는 값에 따른 각 자식 태그들의 수직이동을 살펴보도록 하자. - top: 0px or 100px 우선 부모 div태그에 relative를 적용함으로써 자식태그들의 기준점이 될 수 있도록 position을 잡아주었다. 이후 각 자식 태그 'two' / 'three' 에게 각각 top : 0px / top : 100px 을 부여해 주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세번째 영역입니다. 결과를 확인해보면 top이 0에 가까울수록 부모 태그의 상단에 가까워지면 top이 커질수록 부..

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

[CSS] CSS opacity 를 이용한 background 의 투명도 조절

2021-03-15 opacity 구글 번역상에서 불투명이라는 단어로 해석된다. 말 그대로 색에 투명도를 부여할 수 있는 css 속성이다. 오늘은 이를 통해 배경색의 변화를 주는 방법을 알아보자. - opacity opacity의 기본(default) 값은 1이다. 1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다. 해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다. - 예제 opacity 0.1 opacity 0.3 opacity 0.5 opacity 0.7 opacity 0.9 opacity 1 div 태그에 배경색을 각각 부여해주고 이후 opacity통해 각각 다른 투명도를 부여해 주었다. 결과는 아래와 같으며, 부여된 opacity의 숫자가 작을수록 점점 투명도가..

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