⁂ CSS

[CSS] #3-3 레이아웃 3 : float 속성, clear 속성

1. float, 레이어를 배치하자 한 웹페이지의 레이아웃을 정한다는 것은 위와 같은 속성들을 연합하여 사용한다는 뜻이다. 속성 설명 position 배치 방법을 지정 float 레이어를 왼쪽 또는 오른쪽 위치 지정할 때 사용하며 수평을 기준으로 정렬한다. 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치할 때 지정한다. clear float 속성을 해제 z-index 레이어 순서를 정함 이 중에서 position은 3-2에서 함께 알아보았고 이번 3-3에서는 float 속성을 알아보려 한다. float는 '뜨다'라는 단어이다. 그래서 '웹 페이지에서 이미지와 텍스트를 어떻게 띄워서 배치할 것인가'라는 의미를 담아 사용하는 속성이며 흔히 '부유한다(=float)'라는 표현을 사용한다. 한번 사용한 flo..

[CSS] #3-2 레이아웃 2 : position 속성(Static, Absolute, Relative, Fixed, Sticky)

1. Static 스태틱(static)은 고정되었다는 의미이다. 레이아웃의 가장 기본되는 형태이며 수직으로만 배치된다. 그리고 문서의 흐름에 맞추어 요소들을 배치시킨다. 적용시키는 코드는 아래와 같다. style="position: static;" 이 스태틱은 문서의 기본적인 형태를 그대로 표현하기 때문에 굳이 주지는 않는다. 스태틱이 적용된 코드를 살펴보자. position:static 가장 기본 수직으로만 배치 문서의 흐름에 맞추어 배치 출력된 화면을 보다시피, 코드의 순서 그대로 화면에 출력된 것을 확인할 수 있다. 그리고 이 요소들의 현 위치가 아래에서도 계속 말할 요소들의 '원래 위치'이다. position은 이 원래 위치에서 어떻게 요소들을 움직이게 할 것인가를 결정하는 명령어라고 이해하면 된..

[CSS] #3-1 레이아웃 1 : 레이아웃 이해하기

1. 프레임워크(Framework) 설거지를 떠올려보자. 우리가 열심히 수세미에 퐁퐁을 묻혀서 일일이 접시를 닦아도 괜찮다! 그런데 식기 세척기가 있는 가정에서는 식기 세척기가 설거지를 해준다. 이런 것들을 우리는 프레임 워크라 부른다. 미리 만들어져서 짜여져 있는 것들을 잘 쓰기 위해서이다. 자바에서는 이 프레임워크가 Spring, Mybatis 등이 있고, CSS에서는 Bootstrap 등이 있다. 그리고 이 프레임워크를 잘 적용하기 위해서는 레이아웃을 잘 나누는 것이 중요하다. 2. 레이아웃(Layout) 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치하는 것을 레이아웃이라 한다. 이 레이아웃은 수평, 수직, 그리드 방향으로 배치 할 수 있다. 아래의 사이트를 참조하며 함께 레이아웃..

[CSS] #2-3 Reset(리셋)

1. 리셋? 브라우저들은 기본적인 스타일을 가지고 있다. 그런데 이 브라우저들 마다 각각 다른 스타일을 가지고 있기 때문에 같은 css를 적용해도 Edge, Chrome, Firefox 등의 브라우저에서 사용자에게 비추어지는 모습이 모두 다를 수 있다. 이러한 문제를 해결하기 위해서 브라우저의 스타일을 모두 초기화해서 동일하게 만든 뒤 스타일을 추가해 나가 모든 브라우저에서 같은 화면을 볼 수 있게 해주는 것을 리셋이라 부른다. 이 리셋의 코드는 스스로도 정할 수 있지만 여러 사이트에서 리셋의 기본값을 만들고 공유하고 있다. 필자는 아래의 사이트를 참조하였다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset ..

[CSS] #2-2 고급 선별자 사용해보기

1. CSS의 고급 선별자 사용해보기 1) 특정 선별자에 스타일 주기 ① ' > ' ' , ' 이전 게시글에서 배웠듯 다양한 선별자의 관계를 활용해 CSS를 적용하는 기호가 있다. > : 부모>자식 요소로 선별자를 특정하여 스타일을 적용시킨다. , : '그리고(and)'라는 뜻이다. 예를 들어 h1, div 로 해두면 의 모든 요소와 의 모든 요소에 스타일을 적용하겠다는 뜻이다. ② 가상 클래스(태그의 상세 속성 접근) 말이 어렵다. 우리가 왜 선별자를 사용할까? CSS의 스타일을 적용할 때 특정 요소에만 손쉽게 적용하기 위해서일 것이다. 그래서 CSS는 굵직 굵직한 선별자들에 대한 접근도 가능하지만 상세적인 접근도 가능할 수 있게 하기 위한 선택자가 있다. - nth-child( ) 이 명령어는 몇 번..

[CSS] #2-1 다양한 선별자, 부모-자식 관계

1. 알아두면 좋을 선별자 선별자의 종류는 당연히 무궁무진하다. 그래서 당연히 필요한 것들은 그 때마다 찾아서 사용하는 것이 좋다. 하지만 주로 많이 사용하는 것들은 이 게시글에 남겨두려 한다. 아래의 사이트는 이런 선별자들의 종류들을 담고 있다. https://www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and man..