프론트엔드 지망생

- 19일차 프론트엔드 공부 - 반응형 웹다양한 디바이스에서 접속했을 때 기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 를 뜻합니다. 미디어 쿼리뷰포트의 너비에 따라 웹 사이트의 스타일 시트를 수정할 수 있다.뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다.@media 미디어 쿼리 @media  screen and (max-width: 500px) { // 스크린의 viewport의 너비가 500px 이하인 경우 // 적용시킬 스타일 시트}  박스입니다. 박스1 박스2 * { box-sizing: border..

- 18일차 프론트엔드 공부 - grid 레이아웃 flex 1차원적 구조row 혹은 column 구조 택1 grid 2차원적 구조row와 column 레이아웃 동시 설정 가능 grid 속성 1. 요소의 속성을 grid로 변경display: grid grid-container : grid가 적용된 요소grid-item : grid가 적용된 요소의 자식 요소들grid-line : grid-item 사이의 경계를 의미grid-number : 해당 grid-line이 몇번째 line인지를 의미     2. grid-template-rowsgrid의 행의 개수 및 크기를 지정할 수 있다grid-template-rows: 1fr 2fr 200px 2. grid-template-columnsgrid의 열의 개수 및 ..

- 17일차 프론트엔드 공부 - animation여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법 CSS을 이용해서 애니메이션을 만드는 방법1. transition 속성 활용2. animation 속성과 keyframe 활용transition / animation 차이 transition 특정한 이벤트를 기점으로 작동한다. (hover 등) animation시작하기 위한 이벤트가 없다.시작, 정지, 반복까지 제어할 수 있다.animation@keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어 해주어야 한다.즉 하나의 동작을 만들기 위해서 1개의 keyframe 1개, 애니메이션 속성 1개가 만들어야 한다. transition이 사용하기 더 간편하기 때문에 애니..

- 16일차 프론트엔드 공부 -transform1. 변형 시킨다는 의미2. 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다. transform의 속성값translate(x, y)scale(x, y)skew(x-angle, y-angle)rotate(angle) translate(x, y)요소의 좌표를 움직일 수 있다.x축으로 x만큼, y축으로 y만큼 이동시킨다.transform: translate(20px, 20%) translateX(n)요소의 X축 좌표를 n만큼 움직일 수 있다.transform: translateX(20px) translateY(n)요소의 Y축 좌표를 n만큼 움직일 수 있다.transform: translateY(20px) scale(x, y)X축으로 x만큼, ..

- 15일차 프론트엔드 공부 - 함수calc()괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용한다.ex).item { width : clac(100/4px);} .item2 { width : clac(10px + 20px)} +, - 앞과 뒤는 띄어쓰기가 필수다.*, / 는 띄어쓰기가 필요 없다. 함수 실습1 20px + 50% 100% - 70px 3 * 20px 100% / 4  * { bo..

- 14일차 프론트엔드 공부 -케스케이딩 (Cascading)수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리 1.중요도CSS가 선언된 위치에 따라 우선순위가 결정된다. 브라우저 스타일 시트   브라우저 스타일 시트  사용자 스타일 시트-사용자 폰트 지정- 고대비 모드 사용- 사용자가 본인의 취향, 편의를 위해 사용하는 것 개발자 스타일 시트- 개발자가 만들어 놓은 선언개발자 스타일 시트로 연결한 css 파일 요소 안에 있는 css  중요도 정리인라인 스타일 css 요소 안에 있는 css 로 연결한 css 파일사용자 스타일 시트브라우저 스타일 시트  2.구체성(명시도)선택할 대상을 구체적으로 특정할수록 명시도가 높아진다. 명시도가 높아지면 우선순위도 함께 높아..

- 13일차 프론트엔드 공부 -CSS 상속부모 요소의 속성값을 자식 요소에게 상속한다.하지만 상속되지 않은 속성들도 존재한다 상속되는 속성 colorfont-familyfont-size 상속되지 않는 속성paddingmarginborder  안녕하세요. 처음 뵙겠습니다. 저는 프망생입니다.  * { box-sizing: border-box;}.container { color: blue; font-size: 40px; border: 4px solid orange;}.inner_box { color: red;}    웹폰트 HTML 요소의 글씨체를 바꾸고 싶다면?font-familyfont-family: “폰..

- 12일차 프론트엔드 공부 -가상 클래스 선택자 :first-of-type :first-child형제 요소 중 첫번째 요소를 선택하는 가상 클래스 :first-of-type형제 요소 중 첫번째 요소를 선택하는 가상 클래스 하지만 :first-child와 다르게 :first-of-type 이라는 가상 클래스가 적용된 선택자에 해당 되는 요소만 카운트한다 :last-of-type :nth-of-type(n)  제목입니다. 첫번째 p입니다. 두번째 p입니다. 첫번째 span입니다. 세번째 p입니다.  * { box-sizing: border-box;}.container span:first-child { background-..

- 11일차 프론트엔드 공부 - 레이아웃CSS 레이아웃이란 CSS를 이용해서 단순한 문서 형태의 HTML을 보기 좋게 배치하고 재배열 하는 것. 관련 기능,완성된 배열 등을 포괄적으로 지칭한다. 선택자 전체 선택자*{ property : property value } 그룹 선택자  .class1, .class2 { property : property value } 가상 클래스 선택자실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.선택자:가상 클래스 {property : property value }:first-child:class:first-child {property : property value } :last-child:class:last-child {prope..

- 09일차 프론트엔드 공부 -   태그rel : 해당 태그로 연결 시켜줄 파일과 어떤 관계인지 지정href : 연결할 파일의 경로를 지정 선택자 (Selector) 태그 선택자 tag {property : value} ex)div { background-color : red; }id 선택자#id { property : value; }   ex)#title { font-size : 24px; } class 선택자.class { property : value;}   ex).box { border : 2px solid red;}   자손 선택자 제목부제목   ex).box1 .title {color : red;}-> box1 class 안에 있는 title class 만 선택한다 (공백 필요) 다중 선택자선..