list style, margin, padding, border style

- list 태그 종류

 

list-style-type: lower-roman > 로마소문자 / none > 아무것도 표시하지 않음

list-style-image : url(파일 로드)

 + inside _ 안으로 들여넣어주기

 

앞에 별다른 코드 없이 그냥 속성으로 사용도 가능하고 <ul><ol><li> 같은 태그에 사용이 가능하다 (다 블럭태그)

 

해당 언어를 입력하고 웹으로 확인하게 되면 박스형식으로 웹이 지정되어 있는것을 확인 할 수 있다.

 

block 태그는 브라우저 전체 (넓이 높이를 지정하지 않는다면) inline은 해당 컨텐츠 자체의 크기를 의미한다.

블럭 태그는 브라우저의 크기와 넓이에 따라 크기가 변하지만 인라인은 해당 텍스트에만 적용 되기 때문에 크기를 설정해도 인지하지 못하고 auto로 적용된다.

 

여기서 블럭 태그에게 width를 지정하면 해당 넓이 만큼만 지정되게 된다.

 

지정하지 않으면 무조건 브라우저 크기에 맞게 100%로 잡힌다. 이때 값을 주기 위해서 width를 넣어야 한다.

지금 div 태그에 색상을 주었지만 보이지 않는데 이는 부모가 자식을 감싸고 있기 때문에(아래서부터) 부모의 색상을 사라지고 자손의 색이 올라오는것이다. <p>가 자손태그 <div>가 부모태그

 

넓이를 부모에게만 주었기 때문에 자손은 부모의 속성을 따라 자동으로 넓이가 지정되게 되고 부모가 보이지 않도록 하는것이다 여기서 자식에게 따로 넓이를 지정하면 달라진다.

여기서 각각 넓이를 주어 확인하면 부모가 아래에 감싸고 있는것을 확인 할 수 잇다.

만일 자손이 부모를 벗어나면 나중에 문제가 발생 할 수 있다. (모든 자손은 부모 안에 들어가 있어야한다.) px은 절대값이기 때문에 부모를 따라가진 않는다. 하지만 이렇게 되지 않도록 단위를 %로 주는것이 좀더 유용하다.(유지보수에도 편리)

 

%로 지정하면 부모에 따라 자손의 값이 정해진다.

 

자손에게 heigth를 주게 되면 컨텐츠끼리 부딪치게 된다. 그렇기 때문에 width는 지정해도 heigth는 자동으로 지정되도록 따로 지정하지 않는다.

인라인 박스는 아무리 크기를 주어도 컨텐츠에 해당되는 부분만 적용이 된다.

margin : 여백값 / padding : 공간값 / border : 테두리

 

단축속성 - margin: _무조건 top 부터 시작해서 시계방향으로 간다 (rigth - bottom - left 순으로)

margin은 문제가 많은 속성이라 할 수 있다. 좌우는 상관이 없지만 top bottum이 문제가 생기는데 경계선에서부터 보통 마진을 주는데 서로 줄경우 더 크게 마진을 넣은 부분만 적용되기 때문에(흡수한다.) 예를 들어 m1 buttom에 70px m2에 top을 30px을 주면 70px만 적용되게 된다. 

 

부모마진 탑이 자식마진 탑을 흡수 하기도 한다. (ex : <div margon-top : 50px><p matgin-top : 30px></p></div>의 경우 흡수된다.) 이 때문에 코딩이 꼬이면서 문제가 생기기도 한다.

 

그렇기 때문에 주로 padding으로 크기를 지정하는것이 안정적이다. padding은 해당 텍스트 박스 크기가 커진다.

단축속성은 마진과 마찬가지로 top에서 부터 시계방향으로 돌아간다.

패딩은 인라인 블럭 상관없이 다 적용이 된다. (마진은 블럭에서만 적용 이를 유의)

 

` border 

 

 

여백 초기화 작업 : *{margin: 0; padding : 0;} (*은 전체 태그를 이야기 하는것)

 

---

- 레이아웃 잡아서 (영역) 이미지 넣기 

저장할때는 꼭 영문으로 저장해야한다.

구조작성

의미에 맞게 구조를 작성 하지만 디자인이 맞진 않음

디자인 작업 전 기본 셋팅

 

주석으로 감추기 - ctrl + /