반응형 HTML \ CSS4 [HTML/CSS] <div> 상자 배치 * 본 포스팅은 필자가 개인적으로 학습한 내용 정리 및 리뷰를 위해 포스팅합니다. html의 기본 각 태그를 나누는 상자 배치에 대해서 알아보자 ▲ margin : 바깥 레이아웃 여백 padding : 안쪽 여백 border : content 테두리 ● 상자가로 배치 , , 태그 에는 display: block(가로행을 전부 차지함) 기본으로 가지고 있다. 일부 스타일은 자동은 부모→자식 상속(inherit)된다. - display: block (한 행을 전부 차지) - display: inline(항상 옆으로 채워지는 폭과 너비가 없는 요소) - display: inline-block(내 크기만큼 차지) html을 작성했을 때 기본적으로 display: block속성으로 인해 ▲ 위의 그림처럼 한 줄씩.. 2022. 9. 6. [HTML/CSS] Selector * 본 포스팅은 필자가 개인적으로 학습한 내용 정리 및 리뷰를 위해 포스팅합니다. css는 html 요소의 style을 정의한다. 정의를 위해서 html이 존재해야 하고 sytle을 적용하고자 하는 html요소를 특정할 필요가 있다. 이러한 목적으로 사용되는 것이 셀렉터이다. ● class selector test.css를 만들고 안에 .header class를 만들면 html에서는 class="header"로 추가한다(이름 중복은 피한다) ● tag selector 태그를 css에 넣을 때는 아무것도 붙이지 않고 태그의 이름을 넣는다 ● id selector id값을 넣고 싶을 때는 #id값을 넣도록 한다(id값과 태그 값보다는 클래스를 사용한다) 스타일이 겹칠 경우 우선순위에 따라 정해진다 (직접 태.. 2022. 9. 2. [HTML/CSS] 기본기 다지기 * 본 포스팅은 필자가 개인적으로 학습한 내용 정리 및 리뷰를 위해 포스팅합니다. HTML/CSS 코드 작성에 대한 기본기 복습 시간을 가져보자 ● h1태그와 p태그 ● ol태그와 li태그 ▼ ● 이미지 가운데 정렬 ▼ ● 글자 설정 ▼ ▲ font-size속성으로 글자크기 조절 font-family 속성으로 글자의 폰트설정 color 속성으로 글자 색 설정 letter-spacing 속성으로 자간 설정 text-align: center 속성으로 가운데 정렬 ■ 글자 굵기 조절 ▲ font-weight 속성을 이용하여 100~900까지의 굵기를 조절할 수 있다 ( 태그로 감싸는 방법도 있다.) ● a태그의 밑줄을 없애는 방법 ▼ 결론 자주 사용하는 태그와 스타일링을 복습하는 시간을 가져보았다. 수도 없이.. 2022. 9. 1. [HTML/CSS] 코드 작성 Tip * 본 포스팅은 필자가 개인적으로 학습한 내용 정리 및 리뷰를 위해 포스팅합니다. HTML/CSS 코드 작성에 대한 몇 가지 팁을 정리해보자 ▲ div박스에 width를 주게되면 padding이나 border를 고려하지 않지만 box-sizing: border-box를 주게 되면 border까지의 실제 박스의 폭으로 설정된다 margin: 0을 주게 되면 여백 제거가 된다. 브라우저마다 크기가 달라 보이는 것을 해결하기 위해 normalize.css를 참고하자! 클래스의 간결화를 위해서(Object Oriented CSS) 작성 관습을 익히자 ▲ 버튼을 여러 개 만든다고 가정했을 때 색, 폰트 사이즈 등 클래스를 만들고 위 사진처럼 클래스를 넣어서 효과를 더해준다. Utility class font si.. 2022. 8. 31. 이전 1 다음 반응형
