SMALL 전체 글133 HTML SCSS 사용하기 확장프로그램 사스 sass compiler 검색 -> Live Sass Compiler 설치 설치한 후 , HTML에 간단하게 작성해봅시다! HTML link에 test.css를 걸어줍니다. 그런후 test.scss파일을 만들어줍니다! (test.scss파일이 test.css가 됩니다! 그 방법을 차근차근 알려드릴게요.) 밑에 줄을 보면 눈모양으로 Watch Sass가 보이실거에요. 클릭해주면 Watching 로 변경됩니다. 그리고 test.scss 파일을 생성한후 ctrl +s 를 누르면 이렇게 파일이 생겨납니다! /* CSS주석 */ // 한줄주석도 가능.... 한줄주석은 CSS로 변환X // 변수설정 (자주사용하는 값을 미리 설정) // $변수명 : 값; // 특수문자는 - 사용가능 $white :.. 2023. 4. 18. GRID 끝판왕 클론코딩으로 완벽 파헤치기 , GRID 완벽 분석하기 grid를 사용해보자 (3) 대표사진 삭제 사진 편집 작게작게문서 너비문서 너비옆트임옆트임 삭제삭제 사진 설명을 입력하세요. * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 50px; } li { list-style: none; } .list { width: 1372px; margin: 0 auto; border-bottom: 10px solid #000; display: grid; grid-template-columns: 325px 325px 674px; grid-template-rows: 300px 300px; gap:24px; } .list li { background-color: #fc0; } .list li:nth-child(1) { grid-col.. 2023. 4. 18. GRID로 레이아웃 만들기 , GRID 완벽 분석하기 grid를 사용해보자 (2) * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 50px; } .spacer { height: 50px; background-color: #ccc; } .wrap1 { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 100px 300px 50px; } .wrap1 header { background-color: #fc0; grid-column-start: 1; grid-column-end: 4; } .wrap1 aside { background-color: aqua; } .wrap1 main { background-color: yellowgreen; g.. 2023. 4. 18. GRID 완벽 분석하기 grid를 사용해보자 (1) #flex와 #Grid 비교하기 // flex - 1차원배치 주축 ---배치, 정렬 보조축 ---> 정렬 // Grid - 2차원배치 - 표를 그리는것과 비슷 행과, 열을 생성 row, column 그리드컨테이너 그리드아이템 그리드 : 행과 열을 선언하여 , 레이아웃을 표현 grid-template-columns : 열을 선언 grid-template-rows : 행을 선언 grid-template-columns : 1열 2열 3열 4열 ..... 열의 넓이를 지정 grid-template-rows: 1행 2행 3행 4행 ..... 행의 높이를 지정 px , % , fr (frction) item : 셀 영역 확장하기 번호는 그리드라인 번호를 입력 grid-co.. 2023. 4. 18. 이전 1 2 3 4 ··· 34 다음 LIST
