[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

[CSS] CSS background 와 background-color의 차이 알아보기.

2021-03-13 바로 결론부터 말하자면, backgroud와 background-color 모두 색상을 지정할 수 있다. 다만 background-color 즉 색깔만 지정할 수 있는 반면에, background는 color 이외의 다른 background 옵션들을 지정해 사용할 수 있다. - 사용법 /* 백그라운드의 경우 다양한 백그라운드 옵션을 띄어쓰기로 구분해서 한번에 줄 수 있다. */ background: #color url("image url") no-repeat; /* background-color은 단순히 배경색 옵션만 부여할 수 있다. */ background-color: #color; 사용법은 위의 css 코드처럼 사용할 수 있다. 기본 background-color는 단순히 색깔 ..

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

[CSS] CSS text-align 을 통한 데이터(텍스트)정렬 방법 알아보기

2021-03-11 text-align을 이용하면 블록 속성의 태그들의 내부 데이터(텍스트)를 정렬을 할 수 있다. 구체적으로 해당 태그에 어떤 속성들이 있는지 알아보도록 하자. - left ( 왼쪽 정렬 ) Hello Wrold! div의 영역에서의 정렬된 위치를 좀 더 명시적으로 파악하기 위해서 넓이와 높이 그리고 배경을 지정해 주었다. text-align : left는 아래의 이미지와 같이 왼쪽으로 데이터를 정렬시켜준다. - right ( 오른쪽 정렬 ) Hello Wrold! text-align : right 는 아래의 이미지와 같이 오르쪽 쪽으로 데이터를 정렬시켜준다. - center ( 가운데 정렬 ) Hello Wrold! 아마 가장 많이 사용될 내부데이터 가운데 정렬방법이다. text-al..

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

[CSS] CSS white-space 개행문자를 처리하는 방법 알아보기.

2021-03-10 출처 : www.w3schools.com/ - normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default 모든 개행 문자 / space / tab들이 병합되며, 브라우저 끝에서 자동 줄 바꿈을 해준다. css에서의 디폴트 값으로 적용된다. 실행결과 - nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is ..

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