프론트엔드/HTML, CSS12 [퍼블] flex 관련 명령어들 정리 flex란 디스플레이 관련 css 명령 어므로 속성들을 1차원 형식으로 배치하겠다고 선언하는 것이다. .container > * { width: 50px; height: 50px; border: 1px solid black; } .one{ background-color: black; } .two{ background-color: blue; } .three{ background-color: yellow; } .four{ background-color: green; } .five{ background-color: red; } 해당 코드를 넣으면 이런 결과가 나옵니다. 여기에서 부모 클래스에 flex 요소를 넣어보았다. .container{ display: flex; } .container > * { widt.. 2023. 11. 16. [퍼블] 가상클래스의 순서 자식 클래스의 순서를 지정하여 디자인해 주는 기능 nth-child nth-of-type nth-child 기능은 태그에 영향을 받지 않고 무조건 순서에 영향을 받는다. test1 test2 .test{ border: 1px solid black; width: 300px; } .test div{ font-size: 30px; } .test div:nth-child(1){ color: blue; } .test div:nth-child(2){ color: red; } css에서 nth-child를 주었을 경우 태그의 구분과 상관없이 위에서부터 순서로 css가 지정된 것을 볼 수 있다. 하지만 nth-of-type을 적용한다면 순서와 타입을 지정하여 할 수 있다. test1 h2 test test2 .test.. 2023. 10. 30. [퍼블] 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. 이전 1 2 다음
