본문 바로가기

HTML, CSS

 (30)
(CSS) 자식 컨테이너에게 padding/margin을 주고도 스크롤이 생기지 않게 하는 방법 화면을 100%로 구성하는 와중에 자식 컨테이너에게 padding 혹은 margin을 주고 싶은 경우가 있다.  하지만 이런 경우, 아래와 같이 코드를 작성하면 스크롤이 생겨버린다.  먼저 아래 html, css를 적용하면 스크롤이 생기는 것을 확인할 수 있다.  .parents{ width: 100vw; height: 100vh;}.child{ width: 100%; height: 100%; margin: 10px; border: 2px solid black;}   부모 컨테이너에게 padding 을 주는 경우기본 css를 리셋한 뒤, box-sizing: border-box;를 사용한다. 기본 브라우저 스타일로 마진과 패딩이 주어지기에 이를 모두 0으로 리셋하거나 reset.c..
(CSS) 무한하게 흐르는 텍스트 바 만들기, animation 바 내부에 텍스트를 무한하게 흐르는 효과를 내고 싶다면 key frame을 사용하면 된다.  1.  HTML 세팅컨테이너 역할을 할 div를 만들고, 그 안에 p태그로 흐를 텍스트를 준비한다. 이때 텍스트는 어느정도 길게 만들어야 애니메이션을 적용할때 끊이지 않고, 무한으로 흐르는 것처럼 보인다. SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE ..
(HTML) script 태그 로드 방법에 따른 차이 : async, defer, header안, body 끝 html에서 script 태그를 로드하는 방법에는 크게 4개가 있다. 이번 포스팅에는 각각의 방법과 그 방법에 따라 script가 어떻게 불러와지는지 정리하고자 한다. header태그 안에 작성body 태그 끝에 작성async 키워드 사용defer 키워드 사용   header 태그 안에 작성html 태그 중, header 태그 안에 script 태그를 작성하는 방법이다.  script 태그를 불러오는 과정은 아래와 같다.  HTML 파싱을 진행HTML header에서 script 태그를 만남HTML 파싱을 중단script 로드 후 실행HTML 파싱 재개빠르게 script를 불러올 수 있다는 장점이 있으나, script를 로드하고 실행한 뒤에 다시 html을 파싱 하므로 로딩시간이 길어지거나, 화면에 빈 ..
(CSS, SCSS) scss란? scss 사용법, 주요 기능 Nesting, Mixins, Extend, Functions 사용법 scss란? 기본 css를 사용해 디자인할 때, css가 복잡해질수록 유지보수가 어려워진다. 이때 scss를 사용하면 유지보수에 도움이 될 수 있다. scss란 css 확장 스타일 시트 언어로, css의 모든 기능은 물론 고급기능이 추가되어 있다. 이런 고급기능들은 css코드를 간략화해서, 유지보수를 쉽게 만든다. scss 파일은 .scss 확장자를 가지며, scss 코드를 css로 컴파일 할 수 있다. scss의 설치 방법, 장점, 사용법은 아래 공식 사이트에서 자세히 확인할 수 있다.  Sass: Sass BasicsCSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Thi..
(CSS) grid 6탄 : grid 관련 함수 & 키워드, repeat(), auto-fill, auto-fit, minmax, fit-content, max-content, min-content 사용법 grid 마지막 시리즈로 grid 관련 함수와 키워드에 대해 다루어 보려고 한다.  이번 포스팅에서 다룰 함수나 키워드는 그리드 제작을 편리하게 만들어준다.  repeat()repeat를 쓰면 반복적인 grid template를 간단하게 나타낼 수 있다.  예를 들어 grid-template의 columns(열)을 1fr크기로 3개를 만들고 싶다면  아래와 같이 나타낼 수 있다.grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-template-columns: repeat(5, 1fr); /*repeat로 간단하게 나타낼 수 있다*/    repeat는 두가지 인수를 받는다.첫번째 인수 : 반복 횟수두번째 인수 : 크기 지정 (2개 이상의 값 작성 가능)두번째 인수에서 ..
(CSS) grid 5탄 : grid와 grid item 배치법, align & justify-item, align & justify-self, align & justify-content 사용법 이번 포스팅은 grid와 grid item 배치 방법에 대해서 포스팅하고자 한다.  grid item과 grid 배치법을 나누어서 설명하고자 한다.  grid-item 배치법grid-item 배치에는 아래 요소를 사용할 수 있다.  주의할 점은 그리드 박스보다 해당 아이템이 작아야 배치가 적용된다는 것이다.   item : 자식인 grid-item가 아닌 부모인 grid에 작성하며, 모든 grid-item에 해당 배치가 적용된다.align-item : 세로 방향에서의 아이템 배치 justify-item : 가로 방향에서의 아이템 배치place-item : align-item과 justify-item의 단축 속성place-item :  self : 특정한 자식 grid-item에 배치를 적용시키고 싶을 ..
(CSS) grid 4탄 : grid-auto-rows, grid-auto-columns, grid-auto-flow 사용법, 동적 그리드 만들기 grid를 만들 때, 초기에 설정한 그리드 아이템 외에 추가로 아이템들을 동적으로 추가하고 싶을 수 있다. 이때 grid-auto-rows와 grid-auto-columns, grid-auto-flow를 사용하면 사전에 그리드 아이템으로 지정하지 않은 아이템들을 그리드에 배치할 수 있다.   사용 방법grid-auto-rows : 지정되지 않은 그리드 아이템의 그리드 열(column)의 크기 지정grid-auto-columns : 지정되지 않은 그리드 아이템의 그리드 행(row)의 크기 지정grid-auto-rows: 50px; /*세로(row) 크기 지정*/grid-auto-columns: 50px; /*가로(column) 크기 지정*/  grid-auto-flow : 지정되지 않은 그리드 아이템을 ..
(CSS) grid 3탄 : grid template 사용법 지난 포스팅에는 grid line, 그리고 grid 레이아웃을 변경시키는 방법에 대해 다루었다. 이번 포스팅에서는 grid template을 활용해 직관적으로 레이아웃을 만드는 방법에 대해 다루어보려고 한다.   grid-templete을 사용하는 이유 만약 아래와 같은 레이아웃을 만들고 싶다고 할 때, 2탄에서 설명한 grid-column, grid-row를 사용해 구성하려면 복잡하고 헷갈린다. 이때 grid templete을 사용하면 훨씬 더 직관적으로, 그리고 편리하게 레이아웃을 구성할 수 있다. 정리하자면 기존 grid에서 한 두 칸 정도 변형이 필요한 경우에는 grid-column, grid-row을 활용하고, 좀 더 복잡한 레이아웃에는 grid-templete을 사용하는 게 좋다.  gr..

티스토리툴바