프로그래밍/HTML&CSS
-
[CSS]css 태그 - div / span프로그래밍/HTML&CSS 2021. 12. 23. 11:09
두 태그는 HTML 레이아웃 배치에 사용되는 것으로 디자인적으로 컨텐츠를 묶어줄 때 사용되는 무색무취의 태그다. 차이점 는 block level element 은 inline level element 라는 점이다 ※ blck/inline을 모른다면 아래 링크 참고바랍니다. [CSS]css display 속성 - block, inline, block-inline HTML 각각의 요소들은 특성에 따라 block, inline속성을 가진다. 경우에 따라 요소의 속성을 변경 하고 싶을 때, display 속성으로 속성값을 변경할 수 있다. 1. Block level element block은 화면 전체를 차지하 hyemco.tistory.com 1. 태그 block element 성질을 그대로 가진다...
-
[CSS]css display 속성 - block, inline, block-inline프로그래밍/HTML&CSS 2021. 12. 22. 13:45
HTML 각각의 요소들은 특성에 따라 block, inline속성을 가진다. 경우에 따라 요소의 속성을 변경 하고 싶을 때, display 속성으로 속성값을 변경할 수 있다. 1. Block level element block은 화면 전체를 차지하는 박스형태의 속성이다. - 기본 width="100%" 설정 - 태그 전후 줄바꿈 설정(혼자 한줄 차지) 보통 , 와 같이 단독으로 쓰이는 태그들이 block 속성을 가진다. h1 { border: 2px red solid; } 2. Inline level element inline은 콘텐츠 크기만큼 차지하는 박스형태의 속성이다. - width, heigh 변경 불가 - 전후 줄바꿈없이 다른 요소들과 나란히 배치 , , 과 같이 다른 요소와 나란히 쓰이는 태그..
-
[CSS]css 박스 모델프로그래밍/HTML&CSS 2021. 12. 21. 14:27
오늘은 CSS 기본 설정 중 하나인 박스 모델에 대해 알아보고자 한다. HTML 콘텐츠는 다음과 같이 구성되어있다. - 높이(height) - 너비(width) - 패딩(padding) - 테두리(border) - 여백(margin) 웹페이지에서 우클릭-검사(inspect)를 클릭하면, CSS라는 콘텐츠가 [높이 : 21.500px, 너비 : 158.750px, 마진 : 8px]로 구성된 것을 확인할 수 있다. CSS에서 박스 모델이 중요한 이유는 웹 페이지는 모두 박스들로 구성되어있기 때문이다. 우리 모두가 애용하는 NAVER 홈을 살펴보면, 아래와 같이 박스들로 구성된 것을 볼 수 있다. 물론, 더 세부적으로 NAVER 로고 부분과 검색창 부분으로 나누는 것도 가능하다. 사람에 따라서 박스를 나누..
-
[CSS]css 시작 - style 속성,<style> 태그 / 선택자프로그래밍/HTML&CSS 2021. 12. 20. 14:59
HTML이 웹페이지를 만들기 위한 가장 기본적 언어라면, CSS는 웹페이지를 시각적으로 아름답게 꾸미는 디자인에 관한 언어라고 볼 수 있다. HTML 내부에서 CSS효과는 1. style 속성 2. 안녕하세요 반갑습니다 ② class 선택자 : HTML class 속성 값을 선택자로 사용 : . class 속성 값으로 표현 : 두번째 우선 순위 안녕하세요 ③ id 선택자 : HTML id 속성 값을 선택자로 사용 : # id 속성 값으로 표현 : 가장 높은 우선 순위 안녕하세요 ※ 선택자 사용 예시 1) class 선택자 사용 예시 첫번째 두번째 세번째 첫번째, 두번째 요소만 CSS 효과를 주고 싶은 경우엔 요소(element) 선택자 ol을 활용할 수 없다. 이럴 때, 첫번째 방법인 "style 속성"..