[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 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 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

[CSS] CSS 백그라운드 이미지 가운데 정렬하는 / 반복없애는법

2021-03-09 css에서 스타일에서 기본 백그라운드를 설정하면, 백그라운드의 이미지가 좌측 맨 위에 위치해 있는 것을 볼 수 있다. 또한 점차 백그라운드 옵션을 준 블록 태그에 크기가 커짐에 따라 백그라운드가 이미지가 반복되어 들어가는 경우가 있는데 오늘은 이 부분을 해결하는 방법을 알아보자. - 코드 (백그라운드 url 이미지 출처: 위키피디아) 해당 방법은 모두 background-XXXX 와 같은 옵션 태그로 설정하면 된다. 이미지 한 장을 정중앙에 위치시키기 위해서는 background-position: center; / 이미지의 반복을 없애기 위해서는 background-repeat: no-repeat; 와 같은 태그를 사용하면, 한 장의 이미지만 정중앙에 위치하여 백그라운드의 역할을 하는..

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

[CSS] CSS 포지션(position) Relative / Absolute 알아보자!

2020-10-15 이름에서도 느껴지듯이 포지션은 태그 및 각종 선택자들의 위치를 자유롭게 움직일 수 있는 기능을 수행하는 역할을 뿐 아니라 웹페이지의 디자인 적인 부분에서도 중요한 역할을 수행한다. 그러면 구체적인 사용방법을 알아보도록 하자. 우선 기본적인 템플릿은 리스트를 사용하여 만들었다. ul은 부모 선택자 될 거기 때문에 id를 parent / li는 자식 선택자가 될 거기 때문에, child로 선언해 주었다. position의 가장 기본적인 속성인 relative 사용 코드 입니다. parent child 위의 코드와 주석에서 살펴볼 수 있듯이 자신의 부모를 기준으로 상대적으로 이동을 하게 만드는 코드입니다. 코드 실행시 웹사이트 화면의 구성은 아래와 같습니다. 추가적으로 아래와 같이 chil..

• format_list_bulleted WEB/CSS
• · 2020. 10. 15.
• textsms

[CSS] CSS 캐스케이딩Cascading에 대하여 쉽게 알아보자!

2020-10-11 Cascade 동사로는 폭포처럼 떨어지다 라는 의미를 갖고 있으며, Cascading은 폭포 정도로 해석할 수 있다. 다만 CSS 상에서의 Cascading 폭포라는 의미보다는 우선순위라는 해석으로 받아들이는 게 조금 더 이해하기 쉬울 것 같다. 이와 같은 캐스케이딩이 존재하는 이유는 웹을 구축하는 과정에서 내 여러 선택자를 사용하게 되는데, 이와 같은 선택자들에게 우선순위를 부여하지 않는다면 큰 혼란을 초래할 수 있기 때문이다. 그러면 이제 구체적인 예를 들어가며, 살펴보도록 하자. 포도 사과 수박 우선 정렬되지 않은 리스트를 하나 만들어주었다. 주제는 과일로 정해 사과에 다양한 선택자를 주었으면 내용은 아래와 같다. id(빨간색) / class(초록색) / style(노란색) / ..

• format_list_bulleted WEB/CSS
• · 2020. 10. 11.
• textsms