본문 바로가기

HTML5 & CSS323

[CSS] text-indent 사용하기. 두 번째 줄부터 들여쓰기 하려면? 두번째 줄부터 들여쓰기하기기존에는 줄이 넘어가도 들여쓰기 없이 첫줄과 동일한 위치에서 시작 ⦁ {t(data.title)} 두 번째 줄부터 들여쓰기 적용 (text-indent 대신 padding-left)text-indent을 사용하면 모든 줄이 들여쓰기 적용첫 줄은 그대로 두고 두 번째 줄부터 들여쓰기를 적용하려면 padding-left 또는 margin-left를 조합해서 사용 ⦁ {t(data.title)}⇒ 의도한대로 바뀐 것을 확인 2025. 2. 4.
[Event] MouseOver/Out와 MouseEnter/Leave 그리고 hover "MouseOver"와 "MouseOut"은 마우스 이벤트입니다."MouseOver" 이벤트는 마우스가 어떤 요소 위로 올라갔을 때 발생하며,"MouseOut" 이벤트는 마우스가 어떤 요소를 빠져나갈 때 발생합니다. "MouseEnter"와 "MouseLeave" 이벤트도 마우스 이벤트입니다."MouseEnter" 이벤트는 마우스가 어떤 요소에 진입했을 때 발생하며,"MouseLeave" 이벤트는 마우스가 어떤 요소를 빠져나갈 때 발생합니다. 이벤트 이름이 조금 다르지만, "MouseOver"와 "MouseOut"과 비슷한 동작을 합니다. 차이점은??"MouseOver"와 "MouseOut" 이벤트는 요소 상에서 마우스 커서가 움직일 때 발생하는 이벤트입니다."MouseOver" 이벤트는 마우스 커서가 .. 2023. 10. 26.
HTML & CSS : Flex box로 웹사이트 레이아웃 구성해보기 실습 css파일 @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@100&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; } header { width: 99%; height: 100px; margin: 5px; border: 3px solid #ccc; font-family: 'Do Hyeon', sans-serif; text-ali.. 2022. 12. 19.
HTML & CSS #16 : Flex Box Layout 플렉스 박스 레이아웃 (Flex Box Layout) Grid Layout을 기본으로, Flex Box를 원하는 위치에 배치하는 것 display 속성 배치되는 요소들을 감싸는 부모요소를 플렉스 컨테이너로 지정 display: flex | inline-flex 속성값은 flex(플렉스 박스를 박스 레벨 요소로 정의), inline-flex(플렉스 박스를 인라인 레벨 요소로 정의) flex-direction 속성 플렉스 항목 배치 방향을 지정 flex-direction: row | row-inverse | column | column-inverse flex-direction: column; 으로 지정하면 세로방향을 쌓인다. (위->아래) flex-wrap 속성 플렉스 항목을 한 줄 또는 여러 줄로 배치하는.. 2022. 12. 19.
HTML & CSS #15 : 미디어 쿼리 접속하는 미디어(device)에 따라 특정 CSS스타일을 사용할 수 있도록 하는 것! 브라우저 창의 너비가 조절될 때마다 화면에 표시되는 column 갯수가 달라지고, 사용하는 디바이스의 크기에 따라 웹사이트의 layout이 바뀌는 것이 그 예시이다. 미디어 쿼리 구문 @media [only|not] 미디어_유형 [and 조건] * [and 조건] 미디어 유형은 all, print, screen, tv, aural, braille, handheld, projection, tty, embossed 가 있다. 미디어 쿼리의 조건 - viewport (가로 너비와 세로 높이) 속성으로는 1. width, height 2. min-width, min-height 3. max-width, max-height 가 .. 2022. 12. 16.
HTML & CSS #14 : 반응형 웹 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이 반응형 웹 디자인 이다. 화면 크기가 바뀔 때마다 반응하여 화면 요소들을 자동으로 바꾸어 구현하는 것을 의미한다. viewport 실제 내용이 표시되는 영역이다. 뷰포트를 지정하면 기기 화면, 혹은 크기가 조정된 화면에 맞추어 확대 혹은 축소해서 요소들을 표시해준다. html파일에서는 태그 안에 태그 안에 뷰포트를 지정해 줄 수 있다. 일반적인 사용법으로는 위 코드를 기억하면 된다. Grid System 화면을 여러 개의 column으로 나누어 배치하는 방법 주로 960픽셀 12 칼럼의 그리드 시스템을 사용한다. 1. 고정 그리드 : 화면 너비를 일정하게 고정하여 레이아웃을 만드는 방법 2. 가변 그리드 : 화면 너비를 백분율과 같은 가변 값으로 지정.. 2022. 12. 14.
HTML & CSS : 애니메이션 keyframes hover transition 실습 css파일 @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@100&display=swap'); body { font-family: 'Do Hyeon', sans-serif; text-align: center; } .prod-list { list-style: none; margin: 0; padding: 0; } .prod-list li { position: relative; float: left; padding: 0; margin:.. 2022. 12. 14.
HTML & CSS #13 : CSS 애니메이션 변화(transform) 특정 요소의 크기나 형태 등 스타일이 변경되는 것 스타일시트에서는 수평과 수직으로 웹 요소를 변형시키는 2차원 변형과 z축을 더한 3차원 변형이 있다. translate 함수 지정한 방향으로 이동할 거리를 지정하여 해당 요소를 이동시키는 함수이다. transform: translate(tx, ty) transform: translateX(tx) transform: translateY(ty) transform: translateZ(tz) transform: translate3d(tx, ty, tz) 호버기능을 활용하여 translate함수를 적용시켜보았다. .movex:hover { transform: translateX(50px); } .movey:hover { transform.. 2022. 12. 14.
HTML & CSS #12 : CSS 선택자 연결 선택자 컴비네이션 선택자, 조합선택자 라고도 한다. 선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다. 하위 선택자 부모 요소에 포함된 모든 하위 요소에 같은 스타일이 적용된다. 자식 선택자 부모 요소 > 자식 요소 자식 요소에 스타일을 적용하는 선택자 인접 형제 선택자 요소1 + 요소2 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소만 적용 두 요소는 같은 레벨이면서 인접해야한다. 형태 선택자 요소1 ~ 요소2 형제 요소들에 스타일을 적용할 때 사용 모든 형제 요소에 적용 가능 속성 선택자 지정한 속성을 가진 요소를 찾아 적용시킬 때 사용 [속성] 대괄호를 사용하는데, 사용여부는 마음대로! a[href] { } =>이런식으로 사용하면 된다. [속성 = 값] 선택자 ==로 생각하면 된다... 2022. 12. 14.

티스토리툴바