성장을 위한 기록

문자열이 정해진 영역 넘칠 때... 표시하기 ... p { display: -webkit-box; width: 100%; height: 20px; white-space: normal; text-align: center; -webkit-line-clamp: 1; // ...표시할 줄 -webkit-box-orient: vertical; overflow: hidden; // 영역 밖은 숨기기 text-overflow: ellipsis; font-size: 14px; font-weight: 600; } 여기서 -webkit-line-clamp: 1만 변경하면 원하는 줄에서 ...표시를 할 수 있다. 너비와 높이를 정해주는 것은 텍스트가 늘어남에 영역이 넓어져 모든 글자가 표현되는 걸 방지하기 위해 지정해줬다...

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 플렉스 박스 레이아웃 플렉스 박스를 알기 전 알아야 할 용어 플렉스 컨테이너 - 부모 박스로 플렉스 박스 레이아웃대상을 묶는 요소 플렉스 항목 - 자식 박스로 플렉스 레이아웃을 적용할 대상 주축 - 항목을 배치하는 기본 방향으로 왼쪽에서 오른쪽 수평 방향으로 배치 교차축 - 주축과 교차하는 방향이며 기본적으로 위에서 아래로 배치한다. 플렉스 박스에는 많은 속성이 있다. 플렉스 컨테이너를 지정하는 속성 배치할 요소가 있다면 그 요소를 감싸는 부모 요소를 만들어야 한다. 그리고 그 부모 요소를 플렉스 컨테이너로 만들어야 하는데 그때 사용하는 속성이 displa..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 뷰포트 스마트폰 화면에서 실제 내용이 표시되는 영역을 말한다. PC와 모바일 기기에 표시되는 픽셀의 차이가 있기 때문에, 뷰포트를 고려하지 않고 단순히 크기를 모바일 용으로 작게 만들어도 실제 화면에서는 전체 980px 너비로 표시하게 된다. 기본형 다음은 content 속성과 값이다. 뷰포트를 기준으로 하는 새로운 단위가 있다. vw - 1vw는 뷰포트 너비의 1% vh - 1vh는 뷰포트 높이의 1% vmin - 뷰포트 너비와 높이 중 작은 값의 1% vmax - 뷰포트 너비와 높이 중 큰 값의 1% vmin과 vmax 단위는 vw, vh와 다르게 화면..

제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. animation(애니메이션) 애니메이션은 특정 지점에서 스타일을 바꾸는 방법이며 @keyframes 속성으로 정의하고 animation속성과 그 하위 속성으로 실행 시간이나 반복 여부 등을 결정한다. @keyframes 기본형 @keyframes { { } } 이다. 여기서 선택자는 스타일 속성값이 바뀌는 지점을 가르키고 %단위를 사용하여 나타낸다. 시작과 끝을 나타낼 수 있는 0% 와 100%는 각각 from과 to를 대신 사용한다. animation-delay 트렌지션과 마찬가지로 초(s)나 밀리초(ms) 값을 이용해 시작 시간을 늦출 수 있다. ani..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 변형에 사용하는 속성과 함수 속성 transform 변형을 사용할 때에는 속성 transform을 사용하고 값으로는 밑에 표로 나열되어 있는 함수를 적절히 사용하면 된다. 기본 값 transform: 함수(값) 2차원 변형 3차원 변형 translate translate(tx, ty) 값에서 tx값만 입력하면, ty값은 0으로 간주한다. 또한 각 값이 양수라면 x 축은 오른쪽 y 축은 아래쪽으로 음수라면 반대로 이동한다. scale 함수와 헷갈릴 수 있기 때문에 두 가지 다 적어주는 것이 좋다. scale scale(tx,ty) 값에서 tx값 하나만 입력하..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 하위 선택자 vs 자식 선택자 하위 선택자는 모든 하위 요소를 선택할 수 있어 자식 뿐만 아니라 손자 요소까지 영향을 받는다. 반대로 자식 선택자에 경우 반듯이 자식 요소만 선택이 가능해 범위를 좁힐 수 있다. 인접 형제 선택자 vs 형제 선택자 인접 형제 선택자에 경우 형제관계에 요소 중 가장 가까운 즉 첫 번째 요소만 선택할 수 있다. 형제 선택자는 형제 관계라면 모든 요소를 선택 할 수 있다. 속성 선택자 예시를 들어 설명을 보충해보자면 ..생략... 라는 코드에 선택자를 대입을 해보자 a[href] {} a[href="example.hwp"] {} ..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. background-repeat 값은 repeat(기본 값) repeat-x, repeat-y, no-repeat이 있다, repeat > 가득 찰 때까지 가로와 세로로 반복 repeat-x > 화면 너비에 가득 찰 때까지 가로로 반복 repeat-y > 화면 높이에 가득 찰 때까지 세로로 반복 no-repeat > 한 번만 표시 background-position : left | center | right | | : top | center | bottom | ...... 형식으로 선택할 수 있다. 가장 많이 사용하는 방식은 키워드이며 정 중앙일 경우 ba..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 박스 모델은 블록 레벨 요소와 인라인 레벨 요소로 구분할 수 있다. 블록 레벨 요소 - 태그를 삽입했을 때 혼자 한 줄을 차지하는 것이다. ,,태그 등이 있다. 인라인 레벨 요소 - 한 줄을 차지 하지 않는다. 콘텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 온다. ,,태그 등이 있다. 박스 모델의 기본 구성은 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성된다. border-style 값 none(기본값) - 테두리가 없다. hidden - 테두리를 감춘다. (border-collapse: collapse 경우 다른 테두리도 표시되지 않는다...

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. font-size에서 글자 크기를 조절하는 단위는 여러 가지가 있다. 우선 절대 크기, 상대 크기, 크기, 백분율로 나눌 수 있다. 절대크기 - 브라우저에서 지정한 글자 크기 상대 크기 - 부모 요소의 글자 크기를 기준으로 상대적인 크기 지정 크기 - 글자 크기를 직접 지정 백분율 - 부모 요소의 글자 크기를 기준으로 %로 표시 속성을 알아보면 키워드를 사용 - xx-small < x-small < small < medium < large < x-large < xx-large 순이다. 단위를 사용 em - 부모 요소에 지정한 글꼴의 대문자 M의 너비를 1e..