설계의 품격

말 줄임표 // Text truncation 줄임표를 사용하여 긴 텍스트의 문자열을 자릅니다. 콘텐츠의 내용이 너무 길 경우 .text-truncate 클래스를 사용하여 문자열을 자를 수 있습니다. display: inline-block 또는 display: block이 필요합니다. Praeterea iter est quasdam res quas ex communi. Praeterea iter est quasdam res quas ex communi.

display 너비 높이 한줄 혼자사용 block 지정되지 않으면, 최대한 커진다. 지정되지 않으면, 최소한으로 줄어든다. 혼자사용 (세로나열) inline- block 지정되지 않으면, 최소한으로 줄어든다. 지정되지 않으면, 최소한으로 줄어든다. 최대한 여럿이 사용 (가로나열) table태그 이용해서 작성

1. 라이브 서버 설치하기 2. 라이브서버 테스트하기 1. 라이브 서버 설치하기 VS Code 실행 후 파일 > 기본설정 > 확장 메뉴를 클릭한다. 또는 단축키로 Ctrl + Shift + X를 같이 누른다. 검색창에서 live server를 검색 후 설치버튼을 클릭한다. 2. 라이브 서버 테스트하기 왼쪽 상단에 탐색기 아이콘 클릭하여 확장 메뉴 제거한다. 탐색기에서 폴더 열기를 클릭하여 열 폴더를 지정한다. 새파일 아이콘을 클릭 후 파일명에 test.html을 입력하여 html 파일을 생성한다. 좌측 코드 탭에서 html:5를 입력하면 자동완성이 되는데 엔터를 쳐서 기본 코드를 생성한다. 좌측 코드 탭을 우클릭한 후 Open with Live Server 메뉴를 클릭한다. 또는 단축키로 Alt + L ..

CSS 애니메이션 작업을 할 때 어떻게 해야 퀄리티 높은 애니메이션을 만들 수 있을까요? 여러 가지 방법들이 있겠지만 가장 따라 하기 쉬운 방법에 대해 이야기를 해볼게요. 이야기하기 앞서 혹시 CSS에서 transition을 써보신 적 있으신가요? 애니메이션을 부드럽게 하기 위해 ease, ease-in, ease-out, ease-in-out를 함께 쓰셨나요? 써보신 분들이라면 글의 내용을 이해하기 쉬울 거예요. 안 써보셨어도 상관없습니다 :) 애니메이션과 관련된 속성 CSS 애니메이션과 관련된 속성들은 어떤 것들이 있을까요? 크게 두 가지로 나누자면 애니메이션 관련 속성들과 Transform 속성들이 있습니다. 이번 글에서는 애니메이션 관련 속성들에 대해 써보려고 합니다. 간단하게 하고 싶은 분들이라..

visibility 속성은 태그의 가시성을 결정합니다. 아래의 4가지 값을 가지며, 기본 값은 inherit 입니다. visible: 보임 hidden: 숨김 (자신의 영역은 계속 차지) collapse: 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석) inherit: 부모 요소의 값을 상속 사용법 #box1 { visibility: hidden; } 예제

css 언어를 통해 html 마크업을 진행하는 기능 입니다. html 상에서 css 언어를 띄어쓰기 없이 작성한 후 탭을 누르면 자동으로 html 마크업이 됩니다. ex) ul>li>a 적용모습 클래스 명도 적용이 가능하다. ex ) ul.nav-wrap>li>a 적용모습 내부에 들어가는 href,src 등도 사용가능하다. ex ) ul>li>a[src="#"] 적용모습 내부에 들어가는 텍스트도 작성이 가능하다. ex ) ul>li>a{안녕하세요} 적용모습 안녕하세요 형제 엘리먼트도 만들수 있다. ex ) ul>li>a{안녕하세요}+div 적용모습 안녕하세요

justify-content: flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items: flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다. flex-direction: row: 요소들을 ..

perspective: px ; 부모 엘리먼트나 효과에 perspective 속성이 들어가야 3D 효과의 적용이 가능하다. transform : rotate3D(2,2,3,45deg); X Y Z축 회전 transform : rotateX(45deg); X축 회전 transform : rotateY(45deg); Y축 회전 transform : rotateZ(45deg); Z축 회전

See the Pen 2D transform by park_byoung-yong (@young-yoi) on CodePen.

시멘틱태그의 기본적인 구성 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑버튼등에 사용 사용자가 보거나 숨길 수 있는 세부 콘텐츠를 정의할 때 사용 태그를 통해 보여지는 콘텐츠를 담는 태그로 사용 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정 태그로 정의한 일러스트레이션, 다이어그램, 사진등의 제목설명등을 작성 페이지나 일부분의 머리말(헤더)부분을 지정 페이지나 일부분의 꼬리말(푸더)부분을 지정 페이지의 가장 중요한 메인 부분을 지정 페이지의 네비게이션 부분을 지정 페이지의 일부분을 지정