김성원의 코딩 일기

grid 자식 위치 조절 - grid의 부모에서 자식 속성의 위치를 조정하는 것들에 대해 알아보자. 키워드 justify-content : 부모에 선언하며, 상위 박스 또는 바디 기준으로 자식을 가로 정려을 다양하게 하는데 사용 align-content : 부모에 선언하며, 상위 박스 또는 바디 기준으로 자식을 세로 위치 정려을 다양하게 하는데 사용 place-content : 위에 두 프러퍼티를 묶어서 사용. (place-content: justify-content의 값 align-content 값 순으로 선언) https://waraliyo.tistory.com/106에 들어가면 felx에서 사용하는 프로퍼티와 동일한 기능을 가짐 (justify-content 동일, align-content == a..

fr - 크기 설정으로 박스 안에서 주어진 값을 비율로 하여 박스를 가득 채운다. 모바일, pc 황경을 고려해서 만들 때 사용하면 좋음. grid-template - grid-template-areas랑 사용방법이 비슷하지만 박스의 사이즈도 정할 수 있는데 fr로 하며 grid-template-columns와 grid-template-rows가 없어도 된다. 2-2에 html과 css를 그대로 사용한다고 생각했을 때 코드를 적용하면 .grid { display: grid; height: 70vh; gap: 10px; grid-template: "header header header header" 1fr "content content content nav" 2fr "footer footer footer f..

전 페이지 처럼 HTML을 적용하고 시작한다!! gap - 부모 속성에 display: grid를 적용 후 사용할 수 있으며 자식 속성에 적용한 값 만큼 간격은 둔다. 예) .grid { display: grid; gap: 10px; } column-start, column-end - start의 기준으로 end까지 하나로 묶으며 숫자로 위치와 범위를 정하며 기준은 가로다. end는 숫자에 -1 한대까지 라고 생각하면 된다. 앞에 아무 값을 넣지 않고 뒤에 꺼에 start값을 1을 넣으면 처음에 들어오고 2를 넣으면 2번째에 위치한다. 예) .header { background-color: #2ecc71; grid-column-start: 1; grid-column-end: 5; } row-start, ..

- 부모 태그에 display: grid;를 하면 적용이 되며 표저럼 만들어서 구간을 나누는 형태라고 생각하면 쉽다. ※ 기본 적으로 HTML에 만들고 난 후 css를 할게요~~ grid-template-columns - 가로의 넓이와 계수를 정한다. (밑에와 같이) - 값으로 원하는 개수 만큼 200px 200px 200px 200px 입력하면 가로에 200px길이의 칸 4개를 만든다. 그런데 개수가 늘면 비효율 적이다. 그래서 repeat()를 이용한다. 예는 아래 코드 박스에 있다. .grid { display: grid; grid-template-columns: repeat(4, 200px); /* === 200px 200px 200px 200px */ } .header { background-c..

order - flexbox의 children 요소의 순서를 변경하는 property이다. 앞으로 옮기고 싶다면 음수를 뒤로 옮기고 싶다면 양수를 넣어주면 된다. child2 { order: 2; //기존 위치에서 뒤로 2칸 이동한다. } flex-basis - flexbox의 children 요소에 적용되는 property이며 flex-basis는 flex-shrink 와 flex-grow 를 위한 기본 세팅이다. flex-direction이 row(default)일 때는 width와 같이 작용, column일 때는 height와 같이 작용한다. (잘 사용하지 않는다고 한다.) flexboxfroggy (링크) - flex 연습할 수 있는 곳!! (재미 있고 하다보면 이해됩니다. 저는 24단계 까지 클..

- flex는 모든 자식을 width의 크기의 상관 없이 한 줄에 코드 순서재로 배치하는 특징이 있다. 그 특징을 조절하기 위한 속성에 대해 공부했다. flex-wrap - flex의 특징인 한 줄에 넣을려고 하는 것을 조절한다, wrap : 한 줄에 넣는 특징을 제거하고 자식들 간의 간격을 동일하게 한다. nowrap : width를 무시하고 한 줄에 정렬한다,\ wrap-reverse : wrap동일한 특징에 순서를 자식 순서를 역순으로 정렬한다. 등등~~~ flex-flow - 한 속성에 flex-direction과 flex-wrap 를 적용하게 해준다. flex-flow: flex-direction(속성 값) flex-wrap(속성 값)을 입력하면 된다. align-content - felx-wr..

- 오늘 공부한 css는 flex다!! 우선 flex는 웹페이지의 요소들을 원하는 위치로 옮기는데 유용하다. 그 이유는 기본적으로 html에서 박스 속성을 가진 태그를 선언하면 웹페이지에는 태그의 가로줄을 margin으로 채우는데 그 margin을 없애주고 태그들마다의 공간을 만들어 주기 때문이다!! 사용방법 - 부모 상자에 display: flex; 선언한다. 그러면 바로 안에 있는 자식의 위치를 움직이게된다. 기본 속성으로 가로 정렬을 한다. justify-content - flex의 속성 중 하나로 가로 정렬을 다양하게 할 수 있는 프로퍼티 를 보유하고 있다. 예로 center(가운데 정렬), space-between(자식을 페이지의 끝과 끝을 기준으로 균등하게 배치), space-around(자식..

부모, 자식 선택자 - 부모 태그 안에 자식 태크에만 적용하는 방법! (class, id도 해당!) 방법은 크게 2가지만 알아보자! 부모값 자식값 {} ex) div li -> 부모값 밑에 있는 해당하는 모든 자식 값에 css 적용 부모값>자식값 {} ex) div>li -> 부모값 바로 밑에 있는 해당 자식 값에게만 css 적용 같은 css값 설정하기 - 이건 간단하다. 태그값, 태그값 {}하면 끝! (태그 값 대신 class, id 가능) 가상 클래스 선택자 - 값:가장 클래스(검색해서 찾아보세요) 종류와 설명 링크 같은 css값 설정하기 - 이건 간단하다. 태그값, 태그값 {}하면 끝! (태그 값 대신 class, id 가능) 캐스케이딩 규칙 (중요!) - css 값이 적용되는 우선 순위이며 작은 ..

css 반응현 디자인이란? - 디스플레이의 크기에 따라 웹 페이지의 각 요소가 작동하게 만드는 것으로 미디어 쿼리(media query)을 이용해 디스플레이 사이즈 마다 값을 설정해서 만든다. 사용하는 방법(새롭게 다 작성X 주어진 값에 제거하거나 추가 계념) @media (디스플레이 값 범위 설정) { 해당하는 디스플레이 값의 css 설정 } ex) @media (max-width:800px) { div {display: none; } } 범위 정하는 방법 @media (max-width:800px) 안에 max-width:800px에 대해 알아보자! max-width -> 디스플레이 넓이가 해당 값보다 이하 적용 min-width -> 디스플레이 넓이가 해당 값보다 이상 적용 ※css는 밑에 있는 것..

css란? - html에 태그의 디자인적 한계로 인해 만들어진 웹 퍼플리셔 언어로 가시적인 디자인을 꾸미거나 바꾸는데 사용된다. css 사용 방법 - 사용 방법은 간단하다! head태그 안에 style 태그를 선언 후 그 안에서 코드를 구성하면 되고 파일을 분리하새 작업한다면 head에 link를 태그를 이용해서 연결해주면 된다 예) 그렇가면? 어떻게 적용할까? - 조작하는 방법은 4가지가 있다. 태그 값에 직접 적용하기. 태그 값만 선언 (a {color: red;}) id 값에 적용하기. #을 붙이고 해당 값에 선언(#id {color: green;}) class 값에 직접 적용하기. .을 붙이고 해당 값에 선언 (.class {color: blue;}) html에 직접 style선언 ()