div
블록속성, (투명한 빈박스 why?공간을 나누는 태그라서 벗 화면 낭독기가 해석을 못 함.)
일단 이 구조를 알아야함.
이렇게 입력했을때.
이렇게 나옴.
이거 넣어주면
이렇게 나옴.
공간을 분할하는 div태그
-------------------------------------------
웹페지에서 레이아웃을 만들때 주로 사용하는 태그이다.
block속성의 대표적 태그로 넓이 높이를 지정하지 않으면 브라우저의 전체 너비를
차지한다.
block속성에 너비 높이와 여백을 주고 싶을때에는 css box model이라는 개념을
알고 있어야한다.
css box model
------------------------
block속성을 가진 모든 태그들은 박스의 형태를 갖고 있으며
원하는 위치에 배치하기 위해 css를 이용함.
가로와 세로의 크기를 지정하고, 여백과 배치 형태를 설정하여
원하는 형태를 만들수있다.
이런 박스형태인 요소를 스타일 시트에서는(css) 'css박스 모델'이라고 부름
padding, border,margin은 사방으로 적용할 수 있고, 원하는 위치에만 따로 적용할수도 있다.
박스모델로 컨첸츠 영역을 만들때에는 width와 heoght를 이용해
넓이와 높이를 만들 수 있고, 컨텐츠 안의 여백을 설정할 떄는 padding을 사용함. 컨텐츠와 컨텐츠
사이의 여백을 지정할 경우 margin을 이용해 컨텐츠를 떨어트릴 수 있다.
박스에 테두리를 지정하고 싶을떄에는 boder라는 속성 이용.
구조: width,height -> padding-> border-> margiin
width와 height
--------------------
width 넓이, height는 높이를 말한다 .
이 속성들ㄹ로 정해진 영역이 바로 실질적인 컨텐츠 영역이 된다.
단위는 px,%,vw / vh나 vvmin / vmax를 쓰며 auto(자동) 다위를 쓸 수 있다.
padding / margin을 각각 적용하는 방법1
-------------------------------------
컨텐츠 영역 상하좌우로 각 각 다른 영역을 지정하고 싶을 경우
아래 방법을 사용한다.
1. margin-top : 숫자(단위;) - margin을 위에만 적용한다.
2. margin-bottom : 숫자(단위;) - margin을 아래만 적용한다.
3. margin-left : 숫자(단위;) - margin을 왼쪽 적용한다.
4. margin-right : 숫자(단위;) - margin을 오른쪽 적용한다.
1. padding-top : 숫자(단위;) - padding을 위에만 적용한다.
2. padding-bottom : 숫자(단위;) - padding을 아래만 적용한다.
3. padding-left : 숫자(단위;) - padding을 왼쪽 적용한다.
4. padding-right : 숫자(단위;) - padding을 오른쪽 적용한다.padding / margin을 각각 적용하는 방법2
----------------------------------------
컨텐츠 영역 상하와 좌우에 각각 동일한 여백을 지정하고 싶을 경우
상하와 좌우에 각각 동일한 여백을 지정할 경우에는 각 값을 공백으로 구분한다.
1.padding : 안쪽 여백을 줄때 숫자1(top/bottom) 숫자2(left/right); - 앞의 숫자1의 자리는 상하의 자리, 뒤에 숫자2의 자리는
좌우의 자리이다.
2.margin : 바깥쪽 여백을 줄때 숫자1(top/bottom) 숫자2(left/right); - 앞의 숫자1의 자리는 상하의 자리, 뒤에 숫자2의 자리는
좌우의 자리이다.
padding / margin을 각각 적용하는 방법3
----------------------------------------
컨텐츠 영역 상하좌우에 각각 다른 여백을 한 번에 지정하고 싶을 경우
상/하와 좌/우에 각각 다른 여백을 한 번에 지정할 경우에는 각 값을 공백으로 구분한다.
숫자1이 top부분이며, 시계방향으로 적용된다.
1. padding : 숫자1(top) 숫자1(right) 숫자1(bottom) 숫자1(left)그리고 알아야할 것 !
공통 적용하고 싶을때 동일한 코드가 있으면
따로 따로 안 쓰고 모든 div에 속성 적용함 값이 같기떄문!
그리고
빨강처럼 다 써주기 힘드니까
파랑처럼 한 줄로 정리도 가능
마진을 한줄로 정리하는 방법
위의 패딩도같음
순서
top right bottom left (시계방향으로 정해짐)
패딩과 마진을 태그할때는 꼭 하이픈으로 위치 정확하게 적어야한다 !
하이픈 안 됨 ! 이런 것들은 하나의 단어이기 떄문
+정리 시간
why?의 순서
- 실제적인 컨텐츠 영역은 넓이높이를 정해줘야함.
- 넓이 높이를 정하니까 글자가 넘 붙어서 패딩을 넣어줌.
-그리고 마진을 넣어 넓이를 벌려준다.
(테두리는 안쪽 여백인 패딩과 마진 사이에 생겨야한다.)
테두리 만드는 태그
★완전 중요
※어느정도 씀
테두리를 만드는 booder
-----------------------------
테두리 관련 css 속성은 사각 형태를 가진 모든 요소에 다양하게 적용할 수 있다.
테두리 두께(boder-width), 테두리 스타일(boder-style), 테두리(boder-color)를
테두리 속성이라고 한다.
boder-style
-----------------------
1. ★none : 테두리가 나타나지 않는다. 기본 설정. ★
2. hidden : 테두리가 나타나지 않는다.boder-collapse : collapese;일때 다른 테두리도 모두
표시되지 않는다.
3.※ dashed : 테두리를 직선형태의 점선으로 표시함.
4.※ dotoed : 테두리를 도트 점선으로 표시함.
5. double : 테두리를 이중 실선으로 표시함.
6. grodve : 테두리를 입체적으로 표시함.
7. inset : 테두리를 안쪽 형태로 굵게 표시함. 입체적으로 보임
8. outset : 테두리를 바깥쪽으로 굵게 표시함. 입체적으로 보임(튀어나보이게)
9. ridge : 테두리를 창에서 튀어나온 것처럼 표시함. (그루브랑 반대로 생김)
10. ★solid : 테두리를 실선으로 표시함. 제일 많이 쓰는 속성 !!!!!!!!!!!!!!!★
<!-- vs자동완성
-----------------------div10개 만들고 싶을때 : div*10
class가 있는 div를 10개 만들고 싶을때 : .클래스명*10
class가 있는 다른 태그를 n개 만들고 싶을때 : 태그명. 클래스명*n
ex) li.menu*8 => <li class="menu"></li>가 8개 생김
자동 번호넣기(순차적 번호가 할당됨): 태그명.클래스명{내용}*n
=>태그 해당 클래스명에 숫자를 오름차순으로 할당하고 내용뒤에 숫자를 붙여 함께 할당함.
p>lorem :p태그 안에 lorem ipsum 기본문자를 할당
이렇게 쓰면
나옴
이것도
기본구조 와 div공통적용
위가 기본구조
html, css
---------------------------------------
박스에 꾸밈 넣기
--------------------------------------------
보더 라디오스 (동글동글)
박스를 둥글게 만드는 boder-radius
-----------------------------
박스의 모서리 부분을 둥글게 만들어주는 속성
boder-radius는 값을 적용할때 1개만 선언하면 모든 둥글기가
동일하게 적용되고, 2개로 구분하여 선언하면 대각선으로 적용
또한 값을 4개로 구분하면 각 모서리마다 다른 둥글기로 적용할 수 있다.
-값이 한개일때 : border-radius: 값;
-값이 두개일때 : top-left,bottom-right top-right,bottom-left;
-값이 네개일때 : top-left top-right bottom-right bottom-left값이 하나일때
이렇게 해서 3가지 한꺼번에 생성하기 !!!(어려우뮤ㅠㅠ)
html에 css연결해주기
단
높이와 라인하이트가 같아야지 정샂각형에 텍스트가 정비율로 나옴 (가운데에)
여기에만약
투명으로 변함
라디오스 추가하면 선이 생김
2개의 값으로 했을때
사각형이름은 이렇게 됨.
값을 두개로 나눠쓰면 대각선으로 적용됨.
값이 네개일때
왼쪽 위부터 시계방향으로 되어있음
🍻-이건 윈도우+ . 누르면 나옴 ㅋㅋㅎ
둥근모양을 만들어보자!
반드시 정사각형이어야 %를 넣었을때 동그라미가 됨.
넓이 높이 사이즈가 동일해야지 %를 넣어야지 동글게 변함.
why? %는 상대적 단위라서
-위에 %를 줬는데 동그라미로 안 변한 건 정사각형이 아닌 직사각형 모양이라서그럼
-%가 아닌 px로 적용할때
완벽한 동그라미를 만드려면-높이값의 반을 적용해주면 됨.(너무 동그란 동그라미를 만들지않기위해 %가 아닌 px을 써주는 경우도 많음)(귀퉁이만 동글게 만들기 위해 타원형x)
ex)
0개의 댓글
