Frontend/CSS

앞서 공부한 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 - 부모 요소에 비해 얼마나 커야하는지 척도로 명시 기준의 크..

이 화면에서 content에 맞게 border를 바꾸고 싶었다. html step1 프론트엔드 취업에서 가장 중요한 것은 포트폴리오이다. css @charset "utf-8"; #wrap{ width: auto; height: auto; } .box01{ width:auto; box-sizing:border-box; border:50px solid yellow; } .box01>p{ font:bold 15px "돋움",sans-serif; } box01에 width 값을 여러개 바꿔보다가 찾은 width:fit-content; 처음 보는 속성 값이였는데 왠지 내가 찾던 것일 것 같아 해보니 content에 맞게 딱 ! 바뀌었다. box-sizing도 바꿔보고 display를 넣어야하나 했는데 다시 css..

css란? CSS는 웹페이지에 "디자인"이라는 시각적 가치를 부여하기 위한 언어입니다. HTML문서의 레이아웃과 스타일을 정의한다. W3C에서 표준안을 만들어 내고 있으며 1996년 CSS Level1 이후, 현재 CSS Level2.1에서 Level3까지 보급되어 있다. Internal style sheet html 문서 사이에 css를 선언하는 방식 External style (권장) 요소로 외부 화일 사용하기 서식 선택자{ 속성 : 값; 속성 : 값; 속성 : 값; }