본문 바로가기
[css] block, inline의 뜻과 사용법(ft. display, inline-block) CSS, display의 block과 inline의 개념과 사용법에 대하여 알아보겠습니다. display display 속성이란 화면을 배치하는 방법입니다. display 종류 none | contents | block | inline | inline-block | table | table-cell block과 inline 요소의 개념을 잡는 것은 html 마크업 요소에서 가장 중요하다고 할 수 있습니다. 그래서 이번 기회에 확실하게 짚고 넘어가겠습니다. 이 두 가지의 요소에 따라 전체 레이아웃이 변합니다. block 요소 block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수..
thailwind css 스타일 프레임워크 (ft. 무료 컴포넌트 사이트 제공) tailwind css 무료 사이트 리스트입니다. 실무에서 tailwind를 스타일 프레임워크를 사용하고 있는데, kit 패키지를 구매하지 않고, 무료 배포된 정보를 구글링하여 찾으면서 구현하다 보니 tailwind의 정보가 많아져서 공유하도록 하겠습니다. thailwind cheatsheet 요약표 한 페이지에 모든 클래스이름 정리표입니다. 작업시에 가장 우선적으로 띄워놓는 사이트입니다. umeshmk.github.io/Tailwindcss-cheatsheet/ Tailwindcss-cheatsheet umeshmk.github.io 위의 사이트 보다 더 디테일 한 요약표입니다. 위에 찾는것이 없을 경우, 아래 사이트를 이용합니다. nerdcave.com/tailwind-cheat-sheet Tailw..
[css] 수직 수평 가운데 정렬(ft. flex, align-items: center, justify-content: center;) css로 수직 수평 가운데 정렬하는 가장 간편한 방법입니다 css를 통하여 text-align: center 또는 margin: 0 auto 등을 이용하여, 수평 가운데 정렬을 하는 방법은 많이 알고 있지만, 수직 가운데 정렬하는 방법은 정확하지 않고, tricky 한 편입니다. 이때 간편하게 가운데 배치하는 방법이 display: flex 입니다. 수직 가운데 정렬 부모 또는 해당 요소 css display: flex; align-items: center; 예제 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nulla, quaerat itaque, magnam tempora quam, voluptate eos rerum iste..
[css] reset css 기본값 코드(ft. 기본 css 세팅) 사이트를 제작할 때 css 작업 초기에는 reset css 자료를 꼭 찾게 됩니다. 기본 reset css 코드를 소개하겠습니다. Reset CSS 스타일 초기화를 위한 css 기본값 Eric Meyer’s “Reset CSS” 2.0 css 코드 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q..
[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형) 스타일링을 할때 ellipsis에 대해 정리해 보도록 하겠습니다. 게시판 또는 카드 타입의 다이얼로그의 제목 부분이 길어질 경우, css를 이용하여 일정 크기 이상에서는 '...' 으로 정리합니다. css 코드 한 줄로 글자 수 제한 표시 (single line) · display: block(block레벨)에서만 적용 · text-overflow:ellipsis text가 초과할 경우 생략 부호로 표시 · white-space:nowrap : 공백 문자가 있는 경우 줄 바꿈 하지 않고 한 줄로 나오도록 처리 width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 여러 줄로 글자수 제한 표시 (multi line) overflo..
[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) 홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습니다. 최근에는 플렉서블 박스 레이아웃(flexible box layout) 이란 그리드 레이아웃을 이용하여 매우 간편하게 위치를 변형할 수 있지만, 브라우저별로 지원의 한계가 있기 때문에 아직까지는 float속성을 이용한 레이아웃을 더 많이 사용하고 있습니다. 그래서 오늘은, flaot 속성에 대하여 이야기하겠습니다. float 속성은 웹요소를 문서 위에 떠있게 만듭니다.(=부유하다.) float의 성격 · block 의 성격을 무시합니다. · 형제 구조로 이루어져있습니다. · 해당 요소들의..
[css]뷰포트 미디어쿼리 사용하기(ft. 반응형웹 만들기) 화면 크기에 반응하여 화면 요소들을 자동으로 바꿔 사이트를 구현하는 것이 반응형 웹입니다. PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어 보여주는 웹 디자인을 반응형 웹 디자인이라고 합니다. 반응형 웹을 제작하기 위해서 기본적으로 알아두어야 할 것이 뷰포트(viewport)와 미디어쿼리(mediaqueri) 입니다. 뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다. 뷰포트 지정 방법 아래는 가장 일반적으로 사용되는 설정 입니다. · width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다. · initial-scale=1 : ..
[css] background속성 한번에 사용하기 css 사용의 필수템 background 속성에 대하여 알아보겠습니다. background 속성은 배경을 지정하는 속성으로 해당 영역에 컬러 또는 이미지를 삽입할 때 주로 사용합니다. background 속성 종류 · background-color : 배경색 · background-image : 배경 이미지 · background-repeat : 배경 이미지 반복여부 · background-size : 배경 이미지 크기 조절 · background-position : 배경 이미지 위치 조절 한 번에 사용하는 background 속성: background: url('image 경로') no-repeat center center; background-size: contain 또는 cover; 위의 소스가 제..
[css] 가상요소 선택자 ::before, ::after 사용법(ft. 가상 클래스) 웹의 타이틀에 자주 사용되는 ::before, ::after 사용법을 알아보겠습니다. ::before, ::after이 필요한 경우: 홈페이지 헤더나 푸터에 구분선을 삽입할 때 홈페이지 헤더: 로그인ㅣ회원가입ㅣ마이페이지ㅣ사이트 홈페이지 푸터: 회사소개ㅣ이용약관ㅣ개인정보취급방침ㅣ1:1문의ㅣ모바일버전 가상 클래스 여러 태그 중에서 원하는 태그를 선택하기 위해 사용하는 선택자 자주 사용하는 가상 클래스 종류 :hover / :active / :forcus / :visited 가상 요소 내용의 일부만 선택해 스타일을 적용할 때 사용 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두개(::)를 붙여 표시 -> 가상 요소 앞에 콜론 하나(:)를 붙여도 브라우저에서 가상 요소로 인식하지만 웹브라우저, explo..
반응형

티스토리툴바