웹 개발의 기록들

Box 하나만을 화면 정가운데에 정렬하고 싶을 때가 있는데 가운데로 정렬할 수 있는 방법은 있지만, 정가운데로 정렬하는 방법을 모를 수가 있다. 코드는 다음과 같다. [ HTML ] [ CSS ] body{ width: 100vw; height: 100vh; } .box{ position: relative; left: 50vw; top: 50vh; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: black; } 이렇게 하면 정가운데로 정렬이 가능하다.

- 터미널 사용법은 생략하겠습니다. - 1. sass 설치하기 npm install sass -g 2. 설치 확인하기 npm show sass version 3. scss 파일이 있다면, 터미널 커맨드 창에서 sass [변환할 scss 파일명] [변환 될 css 파일명]을 입력 sass index.scss index.css 4. 3번으로 하면, 매 번 수동으로 입력을 해야하는데, 귀찮다.. 자동으로 저장되면 변환되게 해주는 건 없나? - 이렇게 하면, index.scss 파일에서 수정하고 저장하면, 자동으로 index.css 파일이 변환된다. sass --watch index.scss index.css 5. 폴더 단위로 자동으로 변환해볼까? sass --watch [scss 파일이 있는 폴더명]:[변환 ..

padding과 margin 축약형 1. 상,하,좌,우가 전부 10px이라면? .클래스{ padding: 10px; } 2. 만약 상하( top / bottom ) 이 20px이고, 좌우 ( left / right ) 가 10px 이라면? .클래스{ padding : 20px 10px; } 3. 상(top) 하(bottom) 좌(left) 우(right) 가 다 각자 다르다면? .클래스{ padding-top : 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; } 저 위 코드를 .클래스{ padding: 10px 20px 30px 40px; } 로 축약 가능 4가지를 축약형으로 사용할 때엔, 상,우,하,좌를 생각하면 될 것 같다.

css에서, border를 사용하면 기본적으로 inner가 아닌 outer로 설정이 되어 있기 때문에 border의 px 사이즈가 커지면 커질수록 찌그러지는 현상이 나타나는데, 이걸 inner로 변경할 수 있는 방법이 있다. 그게 바로 box-sizing 속성이다. .클래스 { box-sizing: border-box; } [ box-sizing 미적용시 이미지 ] [ box-sizing 적용시 이미지 ] 저 이미지는 width와 height가 300px로 된 원이다. box-sizing을 하지 않게 되면, outer로 설정이 되어 있어서 300px보다 더 큰 원이 생성된다. 하지만, box-sizing을 border-box로 하게 된다면, inner로 그려져서, 원의 크기가 변하지 않고 border가 ..

css에서, 배경색을 투명색으로 만들고 싶을 때가 있다. rgba 함수를 사용해서, opacity를 0으로 만들어 투명색을 만들 수도 있지만 간단하게 만들 수도 있다. .클래스{ background-color: transparent; } 위 코드를 사용하면 투명색으로 만들 수 있다. transparent가 투명색을 의미한다.

[ 이전 글 보기 ] https://includecoding.tistory.com/221 [ HTML / CSS 공부 ] 4. Flexbox란? [ 이전 글 보기 ] https://includecoding.tistory.com/220 [ HTML / CSS 공부] 3. CSS 기본구조 [ 이전 글 보기 ] https://includecoding.tistory.com/219 2. HTML 기본 문법 ( HTML에서 자주 사용하는 태그들 ) [.. includecoding.tistory.com 1. Grid 사용하기 .클래스 네임 { display: grid; } 이렇게 사용하면, 해당 클래스 안에 들어오는 아이템들을 grid로써 사용할 수 있게 된다. 2. Grid의 속성들 2-1. grid-templat..

[ 이전 글 보기 ] https://includecoding.tistory.com/220 [ HTML / CSS 공부] 3. CSS 기본구조 [ 이전 글 보기 ] https://includecoding.tistory.com/219 2. HTML 기본 문법 ( HTML에서 자주 사용하는 태그들 ) [ 이전 글 보기 ] https://includecoding.tistory.com/218 1. HTML의 기본 형식 퇴사한 지 1년이.. includecoding.tistory.com 예제 기본 코드 item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 div.container>div.item.item${item$}*10 이렇게 입력하면 위와 같은 코드가 나..

[ 이전 글 보기 ] https://includecoding.tistory.com/219 2. HTML 기본 문법 ( HTML에서 자주 사용하는 태그들 ) [ 이전 글 보기 ] https://includecoding.tistory.com/218 1. HTML의 기본 형식 퇴사한 지 1년이 넘은 시점.. 아직 코딩 실력은 줄지 않았겠지 라고 생각하고 C#에서 javascript로 넘어가 javascript/typescript와.. includecoding.tistory.com css를 공부하기 전 기본 html 코드 청춘예찬 대중을 위하여서 밥을 주며, 그들에게 힘차게 뭇 예수는 가슴에 운다. 작고 얼마나 만물은 청춘은 이상의 것은 것이다. 되려니와, 만천하의 뜨거운지라, 이는 생생하며, 그들을 듣는다. ..