본문 바로가기

프론트엔드/HTML, CSS12

[퍼블] 인라인, 블록, 인라인블록 요소 인라인 요소 한 줄에 줄 바꿈이 되지 않고 여러 개 배치 가능 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.
[퍼블] html 박스를 디자인 하기 위한 CSS-2(margin) CSS에서 박스를 디자인하기 2번째는 margin을 활용하는 것입니다. margin border와 윗부분(외부여백)을 활용하는 것이며 간단한 예제를 작성해 보겠습니다. box1 box2 .box1{ border: 10px solid red; width: 100px; height: 100px; text-align: center; font-size: 50px; } .box2{ border: 10px solid red; width: 100px; height: 100px; text-align: center; font-size: 50px; } margin을 주지 않고 박스 두 개를 출력하면 해당 결과처럼 박스가 마치 붙어있는 것처럼 보입니다. 여기서 margin을 10px을 줘보겠습니다. .box2{ border.. 2023. 10. 18.
[퍼블] html 박스를 디자인 하기 위한 CSS-1(padding) html 박스를 디자인하기 위하서는 4가지 CSS 옵션이 필요합니다. width : 넓이 height: 박스의 높이 padding : 텍스트와 border 사이(내부여백) ex) value값 넣는 방법 10px -> 상하좌우 모든 값 적용 10px 20px -> 첫 번째 값은 상하, 두 번째 값은 좌우 10px 20px 30px 40px -> 상 우 하 좌 margin : border와 윗부분(외부여백) 실습) padding에 value 값을 하나만 줬을 경우 .box{ border: 1px solid red; width: 50px; height: 50px; padding: 10px; text-align: center; } padding에 value 값을 두개 줬을 경우 .box{ border: 10px.. 2023. 10. 18.
[퍼블] html 선택자 관련 CSS를 html에 적용하기 위해서는 크게 3가지 방법이 있습니다. 태그 선택자 클래스 선택자 아이디 선택자 아래는 html 태그 및 css 코드입니다. 이것은 태그 선택자 입니다 이것은 클래스 선택자 입니다 이것은 아이디 선택자 입니다 div{ font-size: 20px; font-style: italic; } .test{ font-size: 40px; } #id{ font-size: 30px; font-style: inherit; } 2023. 10. 17.
[퍼블] html에서 글꼴 관련 가장 많이 쓰이는 태그 제목 표시 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 문단, 줄 바꿈 안녕하세요 저는 퍼블리싱을 공부하고 있는 초보 개발자입니다 안녕하세요 저는 퍼블리싱을 공부하고 있는 초보 개발자입니다2 문단, 줄 바꿈 안녕하세요 저는 퍼블리싱을 공부하고 있는 초보 개발자입니다 계속해서 html 퍼블리싱 공부를 하며 프론트엔드 개발자가 되고싶습니다. 글자 굵게 표시하기 글자를 b태그를 활용하여 굵게 표시합니다 글자를 strong 태그를 활용하여 굵게 표시합니다 글꼴 기울기, 밑줄, 취소선 표시하기 이것은 em 태그를 활용하여 기울림을 표시합니다 이것은 i태그를 활용하여 기울림을 표시합니다 이것은 u 태그를 활용하여 밑줄을 표시합니다 이것은 s태그를 활용하여 취소선을 표시합니다 이것은 del 태그를.. 2023. 10. 17.