그럼에도 불구하고

css에서 opacity와 transition-duration 속성을 이용해보자 code inner opacity는 투명도를 의미한다. 0: 보이지 않음 1: 보임 위의 코드에서는 inner 박스의 투명도를 0으로 지정해두어 박스가 보이지 않는다. .box:hover .inner.box { opacity: 1; } . box에 마우스 커서를 놓으면 inner박스의 투명도를 1로 바꾼다. transition-duration: 1s;: 애니메이션이 실행되는 시간을 1초로 지정한다.

CSS에서 flex-direction 기능을 사용해보자. flex-direction: row item1 item2 item3 item4 item5 flex-direction: row-reverse item1 item2 item3 item4 item5 flex-direction: column item1 item2 item3 item4 item5 flex-direction:column-reverse item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-start item1 item2 item3 item4 item5 column 상태에서 justify-content:flex-end item1 item2 item3 item4 item5 flex-dire..

CSS 속성 중에 justify-content를 사용해보자 Code justify-content:flex-start item1 item2 item3 item4 item5 justify-content:flex-end item1 item2 item3 item4 item5 justify-content:center item1 item2 item3 item4 item5 justify-content:space-between item1 item2 item3 item4 item5 justify-content:space-evenly item1 item2 item3 item4 item5 justify-content:space-around item1 item2 item3 item4 item5 현재. container css..

a태그를 사용하여 html내에서 이동하다 보면 뚝뚝 끊기는 것과 같은 이동을 보인다. 이럴 때 scroll-behavior: smooth;를 사용하면 부드럽게 이동할 수 있다. 사용 1Lorem 2Lorem 3Lorem 4Lorem 1Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae molestiae earum dolor maiores quas cumque, quidem, dicta omnis et, velit minima minus possimus atque eius repellat culpa nisi dolorem voluptatem. 맨위로 가기 2Lorem ipsum dolor sit amet consectetur adipisicin..

div와 같은 태그에 width: 200px / height: 200px과 같이 지정해놓고 안에 긴 글을 적어놓았다고 해보자. Test Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat consectetur numquam, sint fugit, aut quos voluptatum voluptatibus, recusandae sapiente itaque sit qui vero pariatur! Fugiat, nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero illo veritatis tenetur placeat ..

css란? cascading style sheet로 html 문서를 꾸미기 위해 사용한다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. 한글은 아름다운 글입니다. STRIKE DELETE css를 이용하기 위해서는 title 태그 바로 아래에 와 같이 적고 사용하면 된다. 내가 사용하고 싶은 태그의 이름을 적거나 id class와 같이 이름을 지정해서 사용할 수 있다. h1 { 내용 } : h1 태그 전체에 내용을 적용시킨다. h1:nth-chid {?} { 내용 } : h1중 부모(여기서는 body)를 기준으로 ? 번째 h1태그만 내용을 적용시킨다. h1:nth..

html에서는 목록을 작성하고 싶을 때 사용할 수 있는 태그가 있다. ol: ordered list ul: unordered list dl: definition list 순서가 있는 목록 html css javascript react 순서가 없는 목록 유튜브 운동 프로그래밍 정의형 목록 html Hyper Text Markup Language Html 요소는 정의 목록 요소()에서 앞선 용어()에 대한 설명, 정의, 또는 값을 제공한다. css Cascading Style Sheet ol은 순서가 있어서 li태그에 작성된 내용이 차례대로 숫자가 붙어서 나온다. ul 태그는 순서가 없기 때문에 li태그에 작성된 내용에 번호가 붙어서 나오지 않는다. dl 태그는 정의하고 싶은 내용을 dt태그에 작성하고 그 ..

HTML에서는 태그를 사용하여 이미지를 넣을 수 있다. 이미지 삽입 그림을 다운로드 하여 사이트 만들 준비 img : inline 속성을 가지고 있고, block 속성도 가지고 있다. inline-block : 줄 바꾸지 않고 너비, 높이, 정렬이 가능하도록 한다. 너비의 비율에 맞추어 높이도 자동 설정 너비, 높이 지정시 단위 px는 생략 ( % 단위도 쓸 수 있음 -> 부모 너비, 높이의 단위 기준 px를 제외한 나머지는 생략 불가 -> css로 지정하여 디자인 ) 웹에서 사용할 수 있는 이미지 확장자 : png, jpg(배경 투명 지정 불가), gif, webp png 16bit, 24bit로 처리 자동으로 줄바꿈 가능 너비, 높이, 정렬 가능 블록 > 인라인 img 태그는 와 같이 작성하고 사용하..