프로그래밍 공부 노트

  가상 클래스 선택자(pseudo-class selector)  :nth-of-type과 :nth-child 비교 :nth-of-type 선택자로 지정된 요소와 일치하는 형제 요소 중 n번째인 요소를 선택한다. See the Pen css - nth-of-type by seungwonleee ( @seungwon-code ) on CodePen . div 부모 태그 안에 1번째 p 태그 자식 요소와 2번째 p 태그 자식 요소를 선택한다. h1과 h2 태그는 p 태그가 아니므로 순서에 영향을 받지 않는다. :nth-child 형제 요소 중 n번째인 요소를 선택한다. 만약 해당 순서의 요소와 선택자로 지정된 요소가 일치하지 않는 경우 선택되지 않는다. See the Pen Untitled by seungwonleee ( @seungwon-code ) on CodePen . div 부모 태그 안에  1번째 p 태그와 2번째 p 태그를 선택하지만 1번째 요소가 h1 태그이므로 선택되지않아 css가 적용되지 않으며 2번째 요소는 p 태그이므로 css가 적용된다.

  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. Type '{ children: string; css: { color: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.   Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322) 찾아보니 상단에 작성되어있는 jsx pragma가 CRA와 충돌이 생겨서 발생하는 문제라고 한다. /** @jsx jsx */ 위 선언을 아래와 같이 변경하면 해당 문제를 해결할 수 있었다. /** @jsxImportSource @emotion/react */ 그런데 @emotion/react를 사용하는 모든 컴포넌트에서 /** @jsxImportSource @emotion/react */ 를 작성해야 한다는 번거로움이 있었다. 번거로움과 실수를 줄이기 위해서 tsconfig.json을 수정해서 jsx pragma를 사용하지 않고도 모든 컴포넌트에서 @emotion/react를 사용할 수 있게 설정을 변경하였다. 그런데 여기서 또 다른 문제가 발생한다. 위 사진과 같이 tsconfig.json을 수정할 경우 컴포넌트 자체에서 오류는 발생하지 않았지만 작성한 css가 적용되지 않는 문제가 발생했다. hotpink 색을 적용했지만 검정색으로 표시되었다. 해당 문제는 CRA의 바벨 설정을 수정하고 해결할 수 있었다. eject를 사용하여 수정하는 방법도 있지만 eject 할 경우 이전 상태로 되돌아 갈 수 없기에 eject 없이 CRA를 커스터마이징 할 수 있게 도와주는 craco 라이브러리를 이용했다. 아래...

이미지의 경우 웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변화한다 하더라도 이미지킈 크기 값은 바뀌지 않는다. 그래서 브라우저 화면의 크기가 줄어들면 이미지의 일부가 가려지는 현상이 발생한다. 이러한 문제점을 해결하기 위해서 CSS를 이용하거나 <img> 태그의 srcset 속성을 이용하여 문제를 해결할 수 있다. 그 외에도  <picture> 태그와 <source> 태그를 사용할 수 도 있다. CSS를 이용한 방법 이미지를 변경되는 레이아웃에 맞게 표시하려면 이미지를 감싸고 있는 부모 요소 만큼 커지거나 작아지도록 하면되는데 이때 { max-width: 100%; height: auto; } 를 속성값으로 지정해 주면 된다. max-width 가 아닌 width 속성을 사용해도 된다. <img> 태그의 srcset 속성을 이용하는 방법 <img> 태그의 srcset 속성은 가각의 다른 환경에서 사용될 이미지 소스를 명시한다. css의 { max-width: 100%; height: auto; } 속성을 이용하더라도 모든 상황에서 사용할 수 있는것은 아니다. 고해상도의 이미지의 경우 크기가 줄더라도 파일의 용량은 크기 때문에 모바일에서 다운로드하는데 시간이 오래 걸릴 수 있다.  또한 텍스트가 포함된 이미지일 경우 모바일 화면에 맞게 줄여 표시하면 텍스트가 너무 작아져 내용을 알아보기 힘들어진다. 이때 <img> 태그의 srcset 속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 이미지 파일을 지정할 수 있다. < img srcset = "img1-320w.png 320w, img2-480w.png 480w, img3-800w.png 800w" sizes = "(max-width: 320px) 280px, (max-width: 480px) 440...

float 속성 float 속성을 사용하면 해당 속성이 적용된 컨텐츠가 블록 내부의 좌측 또는 우측에 붙게되고 다른 컨텐츠들이 float 속성이 적용된 컨텐츠 주변을 감싸게 된다. 기본형: float: left l right l none left -> 해당 요소를 문서의 왼쪽에 배치한다. right -> 해당 요소를 문서의 오른쪽에 배치한다. none -> 좌우 어느쪽으로도 배치하지 않는다. float을 사용하면 아래의 이미지와 같이 float 속성이 적용된 요소의 그 주변을 다른 요소가 감싸게 된다. clear 속성(float 속성 해제하기) float 속성을 사용하면 float 속성을 적용한 요소 다음에 오는 요소들에도 속성이 전달된다. 따라서 float 속성이 적용된 컨텐츠 다음에 오는 컨텐츠들이 감싸는것을 원치 않으면 clear 속성을 사용해서 속성이 적용되지 않도록 할 수 있다. float: left; 였다면 clear:left; 사용하여 무력화 float: right; 였다면 clear:right; 사용하여 무력화 위처럼 사용하면 float 속성을 무효화 시킬 수 있다. 이외에도 float 속성 값과 상관없이 무조건 기본상태로 되돌리고 싶다면 clear: both; 속성을 사용하면 된다. 예시) <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "utf-8" /> < title > float & clear </ title > < style > div { padding : 20px ; margin : 10px ; } .box1 { background : #ffd800 ; float : left ; } .box2...

CSS에서 사용자 지정 속성이란 JavaScript에서의 변수와 같이 문서 전반적인 부분에서 재사용할 임의의 값을 담는 속성을 말한다. 사용자 지정 속성은 전용 표기법을 정의하고 함수를 사용해 사용자 지정 속성을 사용할 수 있다. 사용법을 알아보면 사용자 지정 속성은 CSS 파일에서 위와같이 속성을 작성한다. :root 의사 클래스에 선언한다. 이렇게 선언하면 어디서든지 해당 속성에 접근할 수 있다. 블럭안에와 동일하게 작성하지 않아도 되며 : (콜론) 기호의 왼쪽에는 사용할 변수명을 작성하며 : (콜론) 기호의 오른쪽에는 사용할 속성값을 작성한다. *참고로 사용자 지정 속성은 대소문자를 구분하기 때문에 --text-Color 와 --text-color 는 다른 속성으로 처리된다. 이렇게 선언된 사용자 지정 속성은 아래와 같이 사용된다. 속성 값에 var키워드와 함께 선언한 속성을 사용할 수 있다. var( 선언한 속성명); 이렇게 사용하게되면 해당 속성이 적용된 모든 색상을 한번에 동일한 색상으로 변경 할 수 있어 일일이 수정해줘야하는 번거러움이 줄어들어 유지보수에 좋다.

Sass(Syntactically Awesome StyleSheets) / Scss Sass는 브라우저에서 바로 인식하지 못하므로 CSS 파일로 컴파일해서 사용해야한다. 여러 방법이 있지만 vscode extension 중 Live Sass Compiler 를 설치하면 따로 컴파일 하지 않아도 바로바로 CSS 문법에 맞게 컴파일 해주어 CSS파일을 생성해주기 때문에 편하게 Sass를 사용할 수 있다. Sass의 확장자는 .scss이다. SSass 문법 정리 1번 $ 달러 특수 기호를 사용해서 변수를 선언하고 해당 변수에 값을 입력한 다음 해당 변수를 여러곳에서 적용할 수 있다. CSS에서도 :root { } 문법을 사용하여 동일한 기능을 사용할 수 있지만 조금 더 간편하게 $ 달러 기호로 동일한 역할을 할 수 있다. 변수 $primaryBtn 을 값으로 작성하면 해당 변수에 담겨져있는 hex color 가 해당 속성의 값으로 적용된다. 위와같이 변수로 속성을 작성하고 적용하면 모든 버튼들의 색상을 변경하고 싶을때 변수에 할당된 값만 변경하면 값으로 변수가 작성된 모든곳에서 동일하게 버튼 색상이 변경된다. 2번 nesting 작성법 사용가능 선택자를 nesting(중첩) 하게 선언하여 작성할 수 있다. 일반적으로 CSS에서는 아래와 같이 작성한다. 하지만 Sass 에서는 아래와 같이 nesting(중첩) 되게 작성할 수 있다. CSS와 동일하게 header 안에 자식 태그인 button 태그에 속성이 적용된다. 위와 같이 작성하면 header 안에 모든 자식 태그들을 작성할 수 있어서 header 부분만 보고도 header 안에 작성된 모든 태그들이 해당 부분안에 작성되어 있다는것을 쉽게 파악할 수 있어서 상당히 직관적이다. 3번 Sass 에서는 가상 선택자를 & 특수 기호를 사용해서 사용할 수 있다. &:focus 등등 가상선택자를 위와 같이 선언할 수 있다. 4번 각 페이지 또는 각각의 부분에 대한 scss 파일을 각각 만들고 @import 키...

텍스트 또는 이미지를 수직으로 정렬하는 속성으로 vertical-align 속성을 사용한다. block요소에서는  사용이 불가하며 inline과 inline-block에서만 사용가능한 속성이다.  왜냐하면 vertical-align은 행 방향으로 나열된 요소들을 수직정렬하는 속성이기 때문이다. 즉 inline과 inline-block 소형제 태그끼리 수직정렬하는 속성이다. 그래서 줄바꿈을하는 <div>태그에는 사용이 불가하다.  vertical-align속성의 값들은 다음과 같다. /* keyword values */ vertical-align: baseline; => 부모요소 기준 정렬 vertical-align: sub; =>아래첨자 기준 정렬 vertical-align: super; => 위첨자 기준 정렬 vertical-align: text-top; => 요소 상단을 부모 font의 상단에 맞춰 정렬 vertical-align: text-bottom; => 요소 하단을 부모 font의 상단에 맞춰 정렬 vertical-align: middle; => 부모 요소의 중앙에 맞춰 정렬 vertical-align: top; => 부모 요소의 상단에 맞춰 정렬 vertical-align: bottom; => 부모 요소의 하단에 맞춰 정렬 /* <length> values */ vertical-align: 10em; vertical-align: 4px; => 0px은 baseline과 같은 값이다. 0px을 기준으로 위 아래로 위치를 조절 /* <percentage> values */ vertical-align: 20%; => 0%는 baseline과 같은 값이다. 0을 기준으로 위 아래로 위치를 조절 /* Global values */ vertical-align: inherit; 부모 요소로부터 해당 속성의 계산값을 받아 사용 vertical-align...

box-sizing 속성은 박스 너비의 기준을 정하는 속성이다. 웹 사이트에 여러 요소를 배치하려면 각 요소의 너비를 계산해야 한다. 기본적으로 CSS의 width 속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해야 한다. 이런경우 box-sizing 속성을 사용하면 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성을 지정할 수 있다. 기본형 box-sizing: content-box ㅣ border-box  content-box 는 기본값이며 width 속성 지정시 패딩, 테두리를 제외한 오직 컨텐츠만의 크기를 나타낸다. border-box 는 지정한 width 속성 값 안에 패딩, 테두리 크기를 포함한다. box-sizing: content-box; => 1000px + padding 20px + border3px => 화면에 출력되는 width => 1023px box-sizing: border-box; => 1000px + padding 20px+ border3px => 화면에 출력되는 width => 1000px (977px + 20px + 3px) 화면상에 컨텐츠를 배치하려면 박스 모델의 너비 값을 정확히 계산해야하는데 만약 width 값을 계산하기 어렵다면 box-sizing: border-box;로 지정하여 박스 모델 너비를 조절하기 쉽도록 하는것도 좋은 방법이다.

CSS 이미지 스프라이트(image sprite) 이미지 스프라이트(image sprite)는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹브라우저는 서버에 이미지를 요청하게 된다. 하지만 사용되는 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 여러번 요청을 하게되므로 웹페이지의 로딩 시간이 오래 걸리게 된다.  이미지 스프라이트(image sprite)를 사용하면 이미지를 다운 받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다. 모바일 환경과 같은 한정된 자원을 사용하는 플랫폼에서는 웹페이지의 로딩 시간을 단축해주는 효과가 있다. 또한 많은 이미지 파일을 관리하는 대신 몇개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다. 요즘 웹공부를하면서 참고하고있는 우리나라의 대표적인 웹사이트 네이버를 보면 개발자 도구를 확인해보면 네이버에서 사용되는 이미지들이 한곳에 모여있는것을 확인할 수 있다. 적어도 20개 이상의 이러한 이미지들을 20번이상 서버에 요청하지않고 단 한번의 요청으로 불러와서 이미지의 좌표를 이용하여 화면에 출력할 수 있다. 일단 사진을 불러오고 사진을 출력할 크기를 width와 height로 지정한다. position 속성으로  사진에서 가져오고자하는 이미지의 위치를 x 축과 y축 좌표를 작성한다. 특이한점은 양수로 작성하지않고 -로 시작하며 시작은 맨왼쪽 상단에서 부터 시작된다. repeat 속성을 작성한 이유는 이미지를 불러와서 사용할때 빈 여백이 발생하면 빈공간을 불러온 이미지로 채워넣게되면서 반복이 발생되는데 이를 방지하기 위함이다. size속성은 불러온 이미지의 크기를 조정해준다. 

 CSS 기본적인 레이아웃 잡기 우리나라 사람이라면 모두 사용해봤을 네이버(naver)를 예로들어 레이아웃을 잡아보려고한다. 네이버를 기준으로 웹사이트의 기본적인 레이아웃을 잡을때 가장 먼저 div태그로 가로 행의 갯수를 잡는다.(사이트마다 상이하다.) 대충 딱 봤을때 3등분이 되어있다는 느낌이 강하게 느껴진다. (자세히 보지않아서 모르겠지만 더 세세하게 나눠져있을 수 있다.) 총 가로 3행으로 나눈것을 볼수있다. 이럴경우  <div>1</div> <div>2</div> <div>3</div> 와 같이 화면의 가로 너비 100%를 차지하는 div태그로 나눌수있다. 컨텐츠를 직접 작성하기는 어려워 컨텐츠대신 숫자만 대입했다. 그 후 자세히 보면 가로로 3등분 되어있다는 느낌이 확든다. 공백 | 컨텐츠 | 공백 공백 | 컨텐츠 | 공백 으로 되어있는데 이것은 따로 div태그로 나눴다기보다는 데이터들을 담고있는 div태그에 가로 너비(width)를 지정하여 가운데 정렬 시킨것이다.  가운데 정렬은 style 속성으로 margin: 0 auto; 를 작성하면 가운데 정렬이 된다. margin: 0 auto; 은 margin-top, margin-bottom 은 0, margin-right, margin-left 는 auto 이다. 이렇게 div태그로 가운데 정렬된 데이터를 자세히보면 컨텐츠사이에 여백이있고 2열로 나란히 정렬되어있다는 느낌이 든다. (개발자 도구로 확인하면 2열로 나뉜다.) 이것또한 div태그로 열을 지정해준것이다.  네이버에서 지정한 크기와는 다르지만 가운데 정렬한 최상위 div태그의 너비(width)가 1000px이라고 한다면 그 최상위 div태그 안에 작성되는 div들의 너비 100%는  1000px 이다. div태그는 기본적으로 display: block; 속성을 가지고있어서 기본적으로 2열이 아닌 2행이 만들어진다. 2열을 만들고자 한...

inline display 속성이 inline으로 지정된 엘리먼트는 줄 바꿈 없이 컨텐츠가 옆으로 나란히 나열된다. 대표적으로 <span> 태그가 inline 속성을 가진 태그이다. display: inline 속성을 사용할 때 주의할점이 있는데 width와 height 속성을 적용하더라도 무시된다. inline  속성은 무조건 해당 컨텐츠 크기만큼 width와 height가 고정이기 때문이다. 또한 margin과 padding 속성운 좌우에만 적용이 가능하고 상하에는 적용하더라도 무시된다. block display 속성이 block으로 지정된 엘리먼트는 해당 컨텐츠가 한줄을 모두 차지해 다른 컨텐츠가 줄바꿈이 되도록한다. 대표적으로 <div> 태그가 block 속성을 가진 태그이다. display: block 속성을 사용할 때는 inline 속성과 달리 width, height 그리고 margin, padding 속성이 좌우상하 모두 적용 가능하다. inline-block display 속성이 inline-block으로 지정된 엘리먼트는 위 두 속성(inline, block)을 하이브리드한 속성이다. 외부적으로 보여지는 표현되는 방식은 inline 속성과 같이 동작하지만 block 속성에서만 적용할 수 있었던 witdh, height, margin, padding 속성 적용이 가능하다. 즉, 외부적으로는 inline 속성처럼 동작하지만 내부적으로는 block 속성처럼 동작한다. 대표적으로 <button>, <input>, <select> 태그 등이 있다.

박스 모델을 사용할 때 주의해야할 점이 있다. 요소들을 세로로 배치할 경우 각각의 요소들의 margin과 margin이 만나는 지점에서 값이 큰쪽으로 겹쳐진다(중첩된다)는 점을 주의해야한다. 일반적으로 생각했을 때 각 요소에 margin 값이 20px로 지정되어있다고하면 요소간의 간격이 40px이 될거라고 생각하기 쉽지만 실제 간격은 20px이 된다.  이러한 현상을 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse)라고 한다. 반면에 가로로 요소들을 배치할 경우 이러한 margin 중첩현상은 발생하지 않는다.

margin 0 auto 로 가운데 정렬이 제대로 동작하지 않을때 확인해봐야할것 3가지 1번. inline 속성 태그에 사용하고 있는것이 아닌지!! 2번. width 값이 지정되어있는지!! 3번. 마지막으로 <!Doctype html> 부분이 제대로 작성되어 있는지 또는 해당 부분 상위에 다른 명령어나 단어가 작성되어있는지!!! 보통 1번, 2번 부분에서 문제가 발생한다.

프로그래밍 공부를 하면서 제일 신경쓰였던 부분이 저작권에 관련된 것이다. 포트폴리오로 웹사이트를 만드려고 이미지를 하나 가져와서 사용하려고해도 저작권에 걸리는게 아닌가 걱정이되었다. 저작권에 문제가 있는지 없는지 확실히 알고싶지만 처음 보는 용어들과 기호들 그리고 복잡한 규정? 들이 나를 힘들게 했다. 폰트(font)도 이미지, 아이콘 등 과 마찬가지로 저작권이 있다. 하지만 이러한 저작권을 덜? 신경쓰고 사용할 수 있는 구글 폰트에대해서 알게 되었다. 구글 폰트   https://fonts.google.com/ 사용법은 간단하다. 위에 해당 사이트로 접속해서 원하는 폰트를 바로 검색하고 아래의 사진에서 드래그한 해당부분의 소스코드를 문서에 복사하고 복사한 소스 밑에 사용규칙대로 사용하면 된다. 그리고 검색할때 카테고리에 국가별 등의 설정을 통해 조금 더 구체적으로 검색도 할 수 있다. 하지만 여기서 주의할점이 있다. 바로 저작권. 구글 폰트는 대부분이 무료이지만 아닌것들도 있다고 한다. 라이센스는 원하는 폰트를 검색한 후 아래와 같이 License 목록을 눌러서 확인할 수 있다. 아파치 라이센스 오픈 라이센스 위에서 보이는것과 같이 두개의 라이센스를 확인 할 수 있다. 이외에도 다른 라이센스가 있을 수 있다. 아파치 라이센스 아파치 라이선스(Apache License) 아파치 소프트웨어 재단에서 자체적으로 만든 소프트웨어에 대한 라이선스 규정이다. 아파치 2.0 라이선스는 누구나 해당 소프트웨어에서 파생된 프로그램을 제작할 수 있으며 저작권을 양도, 전송할 수 있는 라이선스 규정을 의미한다.  아파치 라이선스에 따르면 누구든 자유롭게 아파치 소프트웨어를 다운 받아 부분 혹은 전체를 개인적 혹은 상업적 목적으로 이용할 수 있으며 재배포시에는 원본 소스 코드 또는 수정한 소스 코드를 반드시 포함시켜야 하는 것은 아니고 아파치 라이선스, 버전 2.0을 포함시켜야 하며  아파치 소프트웨어 재단에 개발된 소프트웨어라는 것을 명확하게 밝혀야 한...

@keyframes는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다. < html lang = "ko" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > < style > #rectangle { width : 100px ; height : 100px ; background : red ; position : absolute ; animation : move 5s infinite ; //한줄에 속성을 여러개 작성할 수 있다. animation-direction : alternate ; } @keyframes move { from { top : 0px ; opacity : 0 ; } to { top : 200px ; opacity : 1 ; } } </ style > </ head > < body > < div id = "rectangle" ></ div > </ body > </ html > 해당코드를 복사하여 창에 띄어보면 빨간색 네모 상자가...

표를 만들때 table, th, tr, td 태그를 사용한다. table은 표를 만드는 태그 th는 표의 헤더 부분을 만드는 태그 tr은 표의 행을 만드는 태그 td는 표의 열을 만드는 태그 table과 td 태그에 border 속성을 사용하면 두 줄로 표시된다.  border-collapse 미적용 이때 border-collapse 속성을 사용하면 표의 바깥 테두리와 각 셀의 테두리가 떨어져 있는것을 그대로 둘지 혹은 두 테두리를 하나로 합칠 것인지 결정할 수 있다. border-collapse 적용

CSS filter, blend, transform (포토샵?) filter, blend filter와 blend는 포토샵은 아니지만 포토샵 프로그램의 기능들을 CSS로도 가능하게 해주는 속성들이다. filter의경우 사진, 동영상, 프로그램등에 필터를 활용하여 색감에 변화를 적용해줄 수 있다. blend의 경우도 배경과 배경을 합성시켜서 새로운 이미지를 생성하기도하며 이미지와 텍스트를 합성시키는등 여러가지 포토샵기능들을 대신해서 사용할 수 있다. filter와 blend 기능을 어떻게 사용하는지 아래 링크를 통해 확인할 수 있다. 아래 링크에 filter, blend 검색 https://codepen.io/ transform CSS3에서부터 포토샵기능들을 지원하기 시작했다. transform은 포토샵에서 사진을 기울이거나 회전시키는등의 효과들을 사용가능하게해주는 속성이다. 설명을하기보다는 아래의 첨부된 링크를 통해 예제를 확인하자 사용예시: https://codepen.io/vineethtr/pen/XKKEgM 사용설명서: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

CSS float float은 정렬방법중 하나이다.  float은 float만의 특성이 있기 때문에 조심해서 사용해야 한다. float을 사용하면 더 이상 width가 100%가 아니다. 왜냐하면 float은 이름대로 행동한다. 떠있다. 하지만 겹치는것은 아니다.?! 자세히 말하자면 컨텐츠는 겹치지 않으나 블록 범위는 겹쳐진다라고 하는게 맞는것같다. div태그가 차례로 있을때 맨처음 div태그에 float 속성을 작성하면 inline속성과 같이 컨텐츠의 크기만큼만 부피를 차지하게된다.(추가적으로 높이와 너비도 지정해 줄 수 있다.) 형제 태그에 있던 텍스트나 컨텐츠들이 float속성이 적용된 컨텐츠를 둘러싸게된다.   이러한 속성으로 float은 글과 함께 이미지를 삽입할 때 많이 사용한다. img태그의 경우 기본적으로 block level속성을 가지고있는데 block level 속성으로 인해서 옆에 공백이 생기고 글들이 밑으로 내려가는 문제가 발생한다. 이때 float을 사용하여 이미지의 위치를 지정하면서 inline level과 같은 속성효과가 발생되어 삽입된 image옆에 글들을 위치 시킬 수 있다. 만약에 float속성을 사용했지만 형제태그(sibling)가 컨텐츠를 둘러싸는것을 원치 않다면 둘러싸이는 컨텐츠의 위치에따라 clear: left; 또는 clear:right; 또는 clear:both; 해주면 된다. 그러면  float속성을 가진 컨텐츠의 밑으로 이동한다. 그리고 한가지 float의 문제점은 부모태그가 float속성의 자식태그를 인식하지 못한다는것이다. 따라서 높이가 0이 되어버리는 문제가 발생한다.  즉 float의 크기가 어떻하든 아무것도 없다고 인식하여 css효과가 적용이 안된다. 이러한 문제로인해 배경색이 적용이 안되는 문제가 발생하기도 한다. float속성의 자식을 인식하게 하려면 자식태그를 감싸고있는 부모태그에 overflow: auto나 overflow:hidden을 주어...

position 속성은 요소들을 자유자재로 배치할 수 있도록 하는 중요한 속성 중 하나이다. position 속성에는 static, realative, absolute, fixed, sticky 가 있다. static 모든 태그는 기본적으로 static한 상태이며 static 속성을 따로 작성하지 않아도 된다. 요소를 나열한 순서대로 배치하며 top, right, bottom, left 같은 속성 값을 사용할 수 없다. relative 요소의 기본 위치(static)를 기준으로 요소의 위치를 설정하는 방식이다. relative도 static 처럼 요소를 나열한 순서대로 배치한다. static과 달리 top, right, bottom ,left 속성 값을 사용하여 위치를 지정할 수 있다. absolute absolute는 문서의 흐름(요소의 나열 순서)과 상관없이 top, right, bottom, left 속성 값을 사용해 요소를 원하는 위치에 배치할 수 있다.  이때 요소가 움직이는 기준점은 static을 제외한 위치 지정 속성(relative, absolute, fixed, sticky)을 가지고있는 가장 가까운 부모 요소 또는 조상 요소가 기준점이 된다. 그렇기 때문에 요소의 위치를 absolute로 지정하고자하면 위치를 지정하고자하는 요소 블럭의 부모 요소 또는 조상 요소에 position: relative와 같은 위치 지정 속성을 작성해주고 위치 시키고자 하는 요소에 absolute 속성을 적용하고 top, right, bottom, left 속성으로 위치를 지정할 수 있다. 단, 부모 요소 또는 조상 요소 중 위치 지정 요소가 없다면 해당 요소를 감싸고있는 컨테이닝 블록을 기준으로 위치를 지정할 수 있다.  마지막으로 알고 있어야 할 점은 absolute 속성을 사용하면 block 요소인 div 태그도 컨텐츠 크기 만큼의 너비 만을 가지게 된다. fixed fixed 속성 값도 absolute 속성 값처럼 문서의 흐름과 상관없이 위치...

플렉스 박스  레이아웃이란 그리드 레이아웃을 기본으로 하여 박스들을 원하는 위치에 위치하도록 하는 것이다. 1. 플렉스 컨테이너(flex container) - 웹 문서에 텍스트, 이미지, 표 등 요소들을 플렉스하게 사용하려면 플렉스 하고자하는 요소들을 먼저 플렉스 컨테이너(최상위 태그)로 전부 묶어줘야 한다. 2. 플렉스 항목(flex item) - 플렉스 컨테이너에 담기는 요소들이다. 3. 주축(main axis) - 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. 주축은 기본적으로 왼쪽에서 오른쪽 방향(row)으로 배치한다.  4. 교차축(cross axis) - 교차축은 주축과 교차되는 방향이다. flex-direction이 row이면 위에서 아래 방향으로 교차축이 배치되고 flex-direction이 column이면 좌에서 우로 교차축이 배치된다. 플렉스 사용법 및 속성 display : 플렉스 박스 레이아웃을 지정하려면 콘텐츠들을 하나의 부모요소로 묶고 display 속성을 이용해 플렉스 박스 형태를 지정해야 한다. (ex. display : flex;) display 속성과 브라우저 접두사 : 대부분의 최신 모던 브라우저에서는 모두 지원되지만 플렉스 박스를 지원하는 방법이 다르므로 브라우저 접두사를 붙여야 한다. ex) .container { display : -webkit-box; /* ios 6이하, 사파리 3.1 */ display : -moz-box; /* 파이어폭스 19 이하 */ display : -ms-flexbox; /* IE 10 */ display : -webkit-flex; /* 웹킷 구 버전*/ display : flex ; /* 표준 스펙*/ } flex-direction :  자식 요소 정렬 방향 row : 왼쪽에서 오른쪽 수평방향 정렬 column : 위에서 아래 수직 정렬 f...