HTML Semantic Elements

많은 웹사이트들의 코드가 이렇게 만들어진다. 이것들을 좀 더 간편하게, 개발자들의 눈에 더 잘 띄도록 만들어낸게 Semantic Elements 이다. 이 외에도 가 있다. 참고 : https://www.w3schools.com/html/html5_semantic_elements.asp

• format_list_bulleted HTML, CSS
• · 2023. 9. 7.
• textsms

flexbox

✔️flexbox의 특징 1. display: flex 는 모든 요소를 가로로 둔다. 2. display: flex는 부모한테 적용하고 자손을 컨트롤한다. 3. justify-content : 가로로 요소들을 움직인다. (flex-start, center, flex-end, space-between, space-around 등의 값이 있음) 4. align-items: 세로로 요소들을 움직인다. (flex-start, center, flex-end 등 적용가능) 5. flex-direction:column 가로로 정렬된 요소를 세로로 바꾸고 justify-content는 세로로 align-items는 가로방향으로 바뀐다. ✔️예시 children1 children2 children3 부모 태그에 자식태그..

• format_list_bulleted HTML, CSS
• · 2023. 9. 5.
• textsms

position

✔️position 속성 값 1. static:웹사이트의 기본 속성값, (top, right, left, bottom을 이해하지 못함) 2. relative: HTML테그가 있는 위치에서 top, right, left, bottom 값을 통해 움직임 3. absolute: 부모영역에서 top, right, left, bottom을 이용해 주어진 위치로 움직임 4. fixed: absolute와 비슷하지만 스크롤을 내려도 그 위치에 고정, 무조건 브라우저 창 기준 5. sticky: relative와 비슷하지만 스크롤을 내리면 fixed처럼 그 위치에 고정 ✔️상세 설명 1. static:웹사이트의 기본 속성값, (top, right, left, bottom을 이해하지 못함) .locate { positi..

• format_list_bulleted HTML, CSS
• · 2023. 9. 5.
• textsms

이미지와 글의 줄 맞추기

vertical-align: middle; 꼭 img 태그에 스타일 줘야함 vertical-align: middle;

• format_list_bulleted HTML, CSS
• · 2023. 9. 4.
• textsms

HTML 자주 쓰는 코드

img src : 이미지의 경로 width : 이미지의 가로 사이즈 height : 이미지의 세로 사이즈 a href : 링크 input : 검색창 (설명: https://htmlreference.io/element/input/) input - HTML Reference Learn how input works in HTML. htmlreference.io div : 영역을 나눔 p : 문단을 나눔 button : 버튼 span : 그룹을 나누는데 다음줄로 넘어가는 div와 다르게 한 줄에서 그룹을 나눌 수 있음.

• format_list_bulleted HTML, CSS
• · 2023. 9. 2.
• textsms

CSS 연습

1. 첫번째 미션 Box 1 Box 2 Box 3 이 HTML코드를 이용해 이런 결과물을 만들어보자! 우선 어려움이 있어서 결국 선생님이 올려주신 정답을 보고야 말았는데 -HTML- Box 1 Box 2 Box 3 여기서 Box 2의 코드인 class="box green" 은 CSS에서 .box green 을 줘도 적용이 안되었다. 일단 정답은 '.green' 으로 적어야 됐는데 잘은 모르겠지만 위에서 먼저 '.box'를 적었으니 "box" 가 들어간건 먼저 적은 코드의 값들이 적용되는게 아닌가 싶다. (아닐 수 있음)일단 정답 공개! -CSS .box { border: 50px solid red; width: 200px; padding: 50px; margin-bottom : 20px; } .green..

• format_list_bulleted HTML, CSS
• · 2023. 9. 1.
• textsms