EnJinnier

첫번째 웹 프로젝트를 마친 후 반응형 웹 프로젝트를 시작했다.  1. 화면 크기에 따라 폰트 크기 바꾸기#1~#7 : 기본 폰트 사이즈이때 @media (min-width: ㅁㅁㅁpx) { } 를 추가하여 CSS를 작성하면 너비가 ㅁㅁㅁ 이상일때 해당 사이즈로 바뀐다는 의미이다. 따라서 #9~#17은 웹페이지 크기가 768이상이 되면 h1 폰트 사이즈가 24에서 36px로, p의 폰트 사이즈가 16에서 24로 변한다.여러개 작성도 가능하다.@media : 미디어 쿼리미디어 쿼리를 잘 사용해서 반응형 웹사이트를 만들어야 한다. 반응형 그리드다음과 같이 브라우저 크기에 따라 그리드 형태가 달라질때, 2번째의 경우 div4,5,6의 width를 50%로 설정하기만 하면이렇게 된다. 이때 전체 div 태그에 f..

https://velog.io/@smin_0820/리액트-아이콘react-icons-적용 React-icons 라이브러리리액트를 이용해서 웹페이지를 구현할 때 사용하는 방법이며 간편하게 아이콘(react-icons)을 적용하는 방법을 정리한 글이다.velog.iohttps://react-icons.github.io/react-icons/search/#q=delete React icons search results react-icons.github.io

디스플레이(Display)(박스)는 크게 블록과 인라인으로 나뉜다.디스플레이를 잘 알면 요소들이 어떻게 배치될지 쉽게 예상할 수 있고 CSS를 사용해서 바꿔서 사용할 수 있다. 블록(block)- , , 같은 것- 위에서부터 아래로 배치됨-너비와 높이 지정 가능인라인(inline)- , 같은 것- 평소에 글 쓰는 방향- 화면에 꽉 차면 다음 줄로 넘어감- 너비와 높이를 지정할 수 없음(예외적으로 같이 외부 데이터를 보여주는 태그들은 크기를 지정할 수 있음)   만약 인라인 요소의 크기를 지정해주고 싶다면 display: inline-block; 라는 코드를 추가해준 후 width, height 코드를 넣어주면 된다.- 여백은 가로로(글 쓰는 방향)만 가능  Normal Flow : 블록과 인라인이 배..

scroll 가능하게 하기 box 크기를 작게하면 그 안의 content가 빠져나올(overflow) 될때가 있다. box와 content의 크기를 유지하면서 content의 내용을 box 안에 모두 집어넣고 싶을때, 스크롤하여 보이도록 할 수 있다. overflow: hidden; // 넘치는 것 감추기 overflow: auto; // 넘치면 스크롤 하게 만들기 overflow: scroll; // 항상 스크롤 하게 만들기 가로 스크롤 가능하게 하기 CSS에서는 기본적으로 알아서 너비에 맞춰 줄바꿈을 해준다. 따라서 가로 스크롤을 할 필요가 없다. 다만 content 줄바꿈을 하지 않고 그대로 넣고 싶을때, white-space: nowrap; 을 해주면, content가 줄바뀜이 되지않고 그대로 들..

웹페이지에서 모든 요소들은 박스 모델을 따른다. 태그들에 마우스를 올려보면 눈에 보이지 않는 박스들로 이루어져 있음을 알 수 있다. 박스 모델은 총 4가지로 구성되어 있다. 1. margin : 바깥 여백 2. border : 박스의 테두리 3. padding : 안쪽 여백 4. content : 실질적인 내용이 들어가는 곳 margin, padding margin과 padding값은 세로,가로를 따로 설정해줄 수도 있다. 이때 숫자의 순서는 시계방향으로 12시부터 출발한다고 생각하면 된다. 이에 따라 상,하,좌,우 모두 다르게 설정하는 것도 가능함. padding : {세로여백} {가로여백}; padding: 16px 8px 24px 10px; padding-top: 16px; padding-right..

이번엔 그리드 코드를 학습하는 게임이다. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com Grid Garden 게임을 하면서 알게된 관련 명령어들을 정리해보자. grid-column-start / grid-column-end , grid-row-start / grid-row-end grid-column-start: {숫자1} ; grid-column-end: {숫자2} ; 와 같이 입력 시 숫자1번째 세로선에서부터 숫자2번째 세로선까지의 영역에 해당 요소가 들어가게 된다. grid-column-start가 단독으로 사용될때는, 한개의 그리드 열을 나타낸다. 또한, start의 숫자가..

그림자: box-shadow box-shadow: {그림자 가로 위치} {세로 위치} [블러 정도(경계)] [그림자 퍼지는 크기] {색깔} ; 이 값의 순서를 외우기보다는 코드를 이해하는 정도로 알면 됨 (보통 이런 코드를 직접 쓰지는 않고 복사 붙여넣기함) 만약 헷갈리면 MDN 같은 사이트에서 그때그때 찾아보면 된다. 또한, 구글에서 box shadow generator라고 검색해보면 값을 조절해서 코드를 만들 수도 있다. 불투명도: opacity opacity: {불투명도} ; 불투명도는 0~1 사이에서 조절할 수 있으며 1에 가까울수록 불투명하고 0일수록 투명하다. 단, 요소 전체를 반투명하게 하는 방법이다.

프론트엔드 세미나를 진행하면서 아주 귀여운 게임을 알게됐다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com Flexbox Froggy! CSS 명령어를 통해 개구리들을 지정된 자리에 배치하면서 Flexbox 관련 명령어를 익히는 게임이다. 게임을 하면서 알게된 관련 명령어들을 정리해보자. justify-content 속성 : 이 속성은 다음의 값들을 인자로 받아 요소선들을 가로선 상에서 정렬한다. flex-start: 요소들을 컨테이너의 왼쪽으로 정렬 flex-end: 요소들을 컨테이너의 오른쪽으로 정렬 center: 요소들을 컨테이너의 가운데로 정렬 space-between : 요..

배경이미지 : background-image 설정하기 - background-image: 배경사진삽입 - background-repeat: no-repeat; 배경사진은 기본적으로 타일형식처럼 반복해서 깔림. 반복하지 않게 하려면 no-repeat으로 설정 - background-position : left, center, right - background-size: cover; 꽉차게 설정(cover) * 개발자 모드를 사용해서 다른 옵션들을 확인해보거나 각 효과들을 껐다 켜볼 수 있다. 그라데이션 설정 그라디언트도 일종의 배경 이미지처럼 쓰게 되기 때문에 background-image를 이용해 설정해주게 된다. background-image: linear-gradient([각도(기본방향 가로)], 시..

절대적인 크기 단위 픽셀 px 화면을 표시하는 기준이 되는 크기 상대적인 크기 단위 퍼센트 % 부모 태그의 크기에 상대적으로 지정할 때 사용. 예를 들어 부모 태그의 height의 절반 값을 쓰고 싶다면, height: 50% 처럼 쓸 수 있음 #parent { background-color: #A655ED; height: 320px; } #child { background-color: #6942D6; height: 50%; } em 1em은 부모 태그의 font-size 크기임. 예를 들어 부모 태그 글자 크기의 4배를 하고 싶다면 4em이라고 쓰면 됨 #parent { font-size: 16px; } #child { font-size: 4em; //실제로 16*4=64px이 되는 것 } rem 1r..