본문 바로가기

프론트엔드22

[퍼블] hover(호버) 및 transition(트랜지션) hover 란? - 호버는 마우스를 해당 태그에 위치시켰을 때 디자인이 변경되는 것을 말합니다. transition란? - 트랜지션이란 호버로 인하여 디자인이 변경될때 지정되는 시간을 말합니다 테스트 a { font-size: 30px; transition: 0.5s; } a:hover{ color: black; text-decoration: none; } 윗 태그로 html 결과물을 보았을때 이런 식으로 출력됩니다. 하지만 마우스를 태그 위로 위치시켰을 경우 글자 색이 검은색으로 변경되고 밑줄이 없어진 것을 확인할 수 있습니다. 이는 CSS에서 a:hover 옵션값을 주었기 때문이고 a 테그에 보면 transition을 0.5초로 줬기 때문에 해당 시간만에 변경된 것을 확인 할수 있습니다. 2023. 10. 26.
[퍼블]CSS Postiton 속성에 대해서 postition에서 선택할 수 있는 값은 5가지가 있다. static relative -> 주로 부모요소에 적용 absolute -> 주로 자식요소에 적용(left, right, top, bottom 속성과 함께 쓰인다) relative와 함께 쓰일 경우 absolute 속성에는 float 속성과 마찬가지로 공중에 떠있는 것처럼 작용한다 그래서 부모요소에서 항상 높이 값과 넓이 값을 줘야 함 fixed sticky .parent{ background-color: red; width: 300px; height: 300px; position: relative; } .child{ background-color: blue; width: 100px; height: 100px; position: absolute;.. 2023. 10. 26.
[퍼블]html5의 semantic 태그 활용방법 HTML5에서 시맨틱 태그가 도입된 이유는 웹 콘텐츠의 의미와 구조를 더 명확하게 정의하고 검색 엔진, 웹 브라우저, 스크린 리더 등의 사용자 에이전트가 콘텐츠를 더 잘 이해하고 해석할 수 있도록 하기 위함입니다. 명시적인 시맨틱 마크업을 사용하면 웹 페이지의 구조가 더 의미 있는 방식으로 표현되며, 이는 웹 접근성, SEO(Search Engine Optimization), 콘텐츠 분석, 미래 호환성 등 여러 가지 이점을 제공합니다. header, footer : 웹 페이지의 머리말과 꼬리말을 정의하기 위해 도입되었습니다. 이러한 태그를 사용하면 웹 페이지의 주요 제목과 페이지 하단의 저작권 정보 또는 연락처와 같은 내용을 명확하게 구분할 수 있습니다. nav : 주요 탐색 링크와 메뉴를 감싸기 위해 .. 2023. 10. 24.
[퍼블]CSS 레이아웃 가로배치 float none-> 속성 적용 x(디폴트값) left -> 박스를 왼쪽으로 배치 right -> 박스를 오르 쪽으로 배치 margin : auto -> 박스를 중앙으로 배치(block요소만 가능함, inline, inline-block요소는 불가능함) text-align:center -> inline, inline-block요소를 중앙으로 보내려고 할 경우에는 부모 요소에 해당 속성값을 주면 됨 .parent{ border: 5px solid; width: 600px; } .child{ background-color: blue; width: 200px; height: 300px; float: left; } 윗 html 태그와 css를 적용했을 경우에는 자식 요소가 공중에 붕 떠서 left 된 느낌이기.. 2023. 10. 24.
[퍼블] 인라인, 블록, 인라인블록 요소 인라인 요소 한 줄에 줄 바꿈이 되지 않고 여러 개 배치 가능 value값에 따라 width값이 결정됨 width과 heigh값을 주어도 적용 x 상하 margin는 적용 x(좌우는 가능) audio, b, br, del, em, span, small, strong, sub, sup, u, video, audio, mark, sup ... 블록요소 한 줄에 한 개만 배치 가능 기본 고정으로 너비값은 100% width heigh 값 적용 가능 상하좌우 margin 가질 수 있음 전체적인 레이아웃을 잡는데 많이 쓰임 div, hr, h1~6, table, figure, header, nav, footer, section, article, aside, p, ol, ul, li, td, th, form, f.. 2023. 10. 19.
[퍼블] html 박스를 디자인 하기 위한 CSS-3(그림자) html에서 그림자 효과를 주기 위해서는 크게 2가지가 있다 박스에 그림자 효과 주기 -> box-shadow 텍스트에 그림자 효과 주기 -> text-shadow shadow 효과를 주기 위해서는 value 값을 3개를 줘야 하는데, x, y, 퍼짐 색상 순으로 주면 된다 ex) test .test{ border: 5px solid red; width: 100px; height: 100px; box-shadow: 5px 5px 20px black; } .text{ font-size:100px; text-shadow: 5px 5px 20px black; } 해당 html 결과를 보면 저런 식으로 노출이 됩니다. 하지만 box-shadow에 inset조건을 준다면 그림자 효과가 안으로 가게 됩니다. .te.. 2023. 10. 19.