Frontend

앞서 공부한 flex는 한 방향 레이아웃 시스템이고 (1차원) grid는 두 방향 (가로 - 세로) 레이아웃 시스템(2차원) 이다. 그래서 gird 컨테이너가 더 복잡한 레이아웃 표현이 가능하다. CSS 디자인 제외하고 기본 설정이다. row 열, 가로 - 2개의 열 설정 columns 기둥, 세로 - 3개의 기둥 설정 각각 px 다르게 하면 어느 부분이 바뀌는지 보고 싶었다,,,!! fr -> fraction 단위를 뜻한다. 같은 비율을 가지게 된다. 하지만 열이 많아지면 계쏙 쓰는 것이 불편해지므로 그때 사용하는 것이 repeat() 이다. row와 column 모두 repeat를 활용한 모습이다. grid-column:1/3;를 통해 item1을 1-3번의 위치까지 늘린 모습이다. 2개의 번호만큼 ..

📌html - img html-img -주로 콘텐츠 요소로 사용됨 📌css - background css-background - width, height값을 지정해줘야함 * 하지만 지정해줘도 image의 본연의 크기에 맞춰 생성됨 - 내가 설정한 값으로 image가 꽉차게 해주고 싶으면 background-size:cover; (*width:100%; image자신의 크기에서 100%이고 background-size:cover; 부모요소의 width값에 딱 맞춰짐 ) background-repeat:repeat-x /repeat-y /repeat /no-repeat background-position 요소에 지정된 배경 이미지의 위치를 변경하고자 할 때 사용합니다. center, center top, r..

📌transform - 요소의 형태를 변경함 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다. 아무것도 적용되지 않은 기본값은 none 이다. transform이라고 하는 효과는 요소가 block , inline - block 일때만 변환된다. 위와 같은 코드일 때는 작동하지 않는다. a에 display:block을 추가해주니 tramform속성이 적용됐다. 📌transform - 변형함수들 translate() - 이동을 담당하는 transform 함수이다. 왼쪽 상단 (0, 0) 좌표를 기준으로 요소를 이동시킬 수 있다. 단순히 보이는 상태만 이동시키는 것이다. Layout 상에서 이동시키는게 아니다. 하나의 변수만 입력받을 경우 x축으로만 이동한다. -> x, y 가 모두 적용되는..

flexbox는 container에 적용되는 속성값이 존재하고 각각의 item에 적용되는 속성값이 존재한다. 📌container에 꾸며줄 수 있는 속성 display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content display flex-direction row(기본값) - 수평,가로 기준으로 순서 정방향 row-reverse-가로 반대 방향 column - 수직,세로 column - 세로 반대 방향 flex-wrap: 한줄에 가득차면 다음줄로 넘어갈지 안갈지 결정 nowrap(기본값) wrap wrap-reverse flex-flow:flex-direction, flex-wrap 합한 것 column n..

📌positionCSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.   *포스트 잇과 비슷한 속성을 가지고 있다.position의 기본값은 static  box @charset "utf-8";#container{ background-color: yellow; left:20px; top: 20px;}position을 잡지않고 위치를 설정하면 움지이지 않는다.   @charset "utf-8";#container{ background-color: yellow; left..

📌절대단위 pt(google docs/text editor 등에서 많이 쓰이는 단위), cm,mm, pc, in(잘 안써서 넘어가보자) 1. px - 디스플레이 해상도에 따라 화면에서 보이는 크기 변동 평소에 px이 직관적이고 편해서 주로 사용하는 단위였는데 반응형 웹으로 만들기 위해서 %와em,rem에 익숙해져야겠다는 생각을 많이 했다. - 사이즈가 확실하게 정해져 있는 요소에만 집어넣기 📌상대단위 1. % - 부모 요소에 비해 얼마나 커야하는지 비율로 명시 기준의 크기를 100%로 잡는다. (정의는 어렵게 되어 있지만 우리가 알고 있는 가장 흔한 단위여서 쉽게 생각하면 된다. ) 계산법 : 자신의 크기 / 기준의 크기 * 100 2. em - 부모 요소에 비해 얼마나 커야하는지 척도로 명시 기준의 크..

프론트엔드(frontend)웹의 화면 즉, 사용자 인터페이스(User Interface)를 구현하는 개발자이다. ​슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소들이 프론트엔드 개발을 이루는 부분이다. 백엔드(backend)사용자 눈에 보이지 않는 서버를 전체적으로 담당한다. 데이터를 저장하고 관리하며, 웹사이트의 클라이언트 측(client-side)에서 모든 것이 매끄럽게 작동할 수 있게 해줍니다. 프레임워크(framework)프레임워크는 프로그래밍의 뼈대가 준비되어 있고, 내가 작성할 공간들만 비워져 있는 것이다. 프레임워크를 활용하면, 정해진 곳들에 코드를 채워넣음으로써 보다 쉽게 프로그램을 완성할 수 있습니다.프레임워크는 조금 더 큰 틀 ex) 카페를 열고 싶은..

티스토리를 하고 나서 설명을 하려니깐 헷갈리고 모호하게 알고 있는 용어를 정리할 필요성을 느꼈다. 앞으로 알아가는 용어들이 있다면 수정할 생각이다!! 태그 step1  로 묶어서 표현하는 명령어를 말한다. 기본 형식이다. 시맨틱요소 웹페이지 전체 또는 일정 영역을, 의미적으로 구획,분할할 때, 사용되는 요소들을 말한다. 예)header, nav, main, section, article, aside, footer  css.box01{ width:fit-content; border:50px solid yellow;}javascriptconst superman = { name:'david', age:33} 선택자.box01속성(attribute)width, border,name,age값(..