[CSS]01

CSS : Cascade Style Sheet 

• Cascade : 여러 곳에서 연쇄적으로 적용 
• HTML Elements 의 모양을 디자인하고 위치를 조정 
• 사용법 
• External Style Sheet : 독자적인 css 파일을 만들고 HTML 에서 import. Linking Style Sheet 라고도 한다. 
• HTML 의 head 부분에 다음 라인을 추가 
• <link rel="stylesheet" href=" URL "> 
• URL 은 css 파일 위치 
• Internal Style Sheet : 하나의 HTML 문서에서 style 영역을 따로 생성해서 사용. 주로 head 부분에 생성 
• Inline Style Sheet : HTML 문서내에서 적용하고자 하는 Element 에 바로 적용하는 방법 

 

선택자 

• 태그 선택자 : HTML 태그 중 특정 태그를 선택 
• div { ~ } 
• HTML 문서내의 div 태그 전체를 선택 
• ID 선택자 : 태그에 id 값을 줘서 해당 id 로 선택 
• #name { ~ }  
• 식별자이기 때문에 같은 id를 쓰면 안된다. 
• HTML 은 Java 처럼 논리적 언어가 아니기 때문에 문법적 에러를 미리 잡아내지 못한다. 
• Class 선택자 : 태그에 class 값을 줘서 해당 class 로 선택 
• .fruits { ~ } 
• 하나에 여러 개의 class 를 줄 수 있다. 
• 속성 선택자 
• #pId[type="text"] 
• 자손 선택자 : 해당하는 선택자 바로 밑에 있는 자손을 선택한다. 
• .contentsWrap>h4 
• class 명이 contentsWrap 인 태그의 바로 밑에 있는 h4 만 선택된다. 
• .contentsWrap h4 
• class 명이 contentsWrap 인 태그 밑에 있는 모든 h4 들이 선택된다. 
• 구조 선택자 
• :nth-child( ? ), :last-child, first-child 등등 
• 자손 중 특정 위치의 자손을 선택 
• #fruits>li:nth-child(2) : id 가 fruits 인 태그 바로 밑에 li 중 2번째 자손 선택 
• 상태 선택자 
• hover 
• 마우스가 올려졌을때 
• #food > li : hover    : id가 food 인 태그의 바로 밑에 li에 마우스를 올렸을때 

 

 

display 

• div 과 span 의 경우 display 속성을 서로 바꿔주면 완벽하게 동일하게 작용한다. 
• 우리가 보는 화면의 구성 
• Normal Flow Area : 한 라인에 하나씩 올 수 있다. 
• View Port : block 속성이 사라지지만 넓이와 높이를 조정하는 속성은 살아있다. 
• 개발자의 의도는 아니지만 layout을 잡는 방법을 강구하다가 view port 를 이용하기 시작했다.
  
  

block 속성인 태그를 오른쪽으로 나열 하고 싶다면?? 

• 넓이와 높이가 필요없다면 display : inline 을 준다. 
• 넓이와 높이가 필요하다면 float : left / right 로 view port로 띄운다. 
• display block 속성은 사라지고 넓이와 높이는 그대로 남는다. 
• position 을 조절해준다. 

 

Position 

• 요소의 위치를 조정할 때, 내부에 margin을 주거나 외부에 padding 주게되면 해당 크기만큼 공간이 생긴다. 
• 정해진 외부 공간의 크기를 벗어나는 요소는 다음줄로 밀려나게 된다. 
• 다른 요소에 영향을 주지 않고 단순히 배치만 변경하고 싶을때 사용한다. 
• 종류 
• static ( default ) : Normal Flow 흐름에 따라서 배치되고, 위치를 바꿀 수 없다. (margin/padding으로 조절) 
• relative : 상대적인 위치 
• 특별한 설정을 주지 않으면 static 처럼 움직인다. 
• top, left, right, bottom 으로 이동 시킬 수 있다. 
• normal flow 상 원래 위치를 기준으로 이동한다. 
• 나중에 만들어 진 것이 위로 올라온다 = z-index 값이 나중에 만들어진게 더 크다. 
• absolute : 절대 위치 
• 가장 근접한 parent 요소중 static 아닌 요소를 기준으로 움직인다. 
• parent 중 아무데도 static이 아닌 요소가 없다면 body = browser 를 기준으로 움직인다. 
• fixed : view port에 고정시킨다. 
• 스크롤이 생겨서 화면을 내릴때 항상 동일한 곳에 위치한다.

중앙에 정렬 

• Horizontal center 
• text 
• 단순히 text-align : center 만 주면 된다. 
• box 
• margin : auto 로 좌우 margin을 동일하게 준다. 
• box 자체를 50% 만큼 이동시키고 자신의 크기의 50%만큼 반대로 이동시킨다. 
• transform : translate 를 활용 
• 직접 계산해서 px 값으로 이동 
• text 와 box 의 이동은 명확하게 구분 되지는 않는다. 
• 이동방법은 다양하고, 각각 장단점이 있다. ( ex. cross browsing 문제 ) 
• Vertical center 
• text 
• padding 으로 조절한다. 
• line-height 을 박스 사이즈와 동일하게 한다. 
• position을 준경우  
• 50% 만큼 이동시키고, 자신의 크기의 50%만큼 당긴다. 
• translate 
• 직접 계산해서 px 값으로 이동  
  
  

margin / padding 

• padding : 영역의 안쪽을 밀어내 공간을 만든다. 
• margin: 영역의 바깥을 밀어내 공간을 만든다. 
• 배치할때 사용되며, 다른 요소에 영향을 줘야 하거나 상관이 없을때 사용한다. 
• 예상하지 못한 필요없는 margin / padding 이 있다면 margin / padding : 0 으로 없앤다. 
• 중앙 정렬을 할때 margin: auto 대신 margin : 0 auto 

 

transform / animation 

• transform : 형태를 변화 시킬때 사용된다. 
• translate, translateX, translateY 
• 해당하는 만큼 이동 
• top, left, right, bottom 은 % 값을 줄수 없을 수 있지만 translate 는 줄 수 있다. 
• 자신의 크기를 기준으로 % 만큼 이동된다. 
• left : 50% 는 parent size를 기준으로 가능하다. 
• top : 50% 는 parent의 높이가 정해져 있을때에만 가능하다. 
• 기본적으로 높이는 한계가 없다. 
• rotate, rotateZ (default), rotateX (X축으로 회전), rotateY(Y 축으로 회전) 
• rotate(20deg) 로 사용 
• scale : 크기를 배수로 증가 / 감소 
• animation 
• animate.style 사이트에서 CDN 방식으로 외부 style sheet 을 가져와서 사용한다. 
  

네비게이션 바를 만들때 

• ul > li 로 만드는 경우 float 으로 li 들을 띄워서 가로로 배열한다. 
• 이때 view port로 뜬 li 자손을 ul은 인식하지 못한다. 
• ul에 overflow : visible 을 준다. 

 

overflow 

• 자신의 내용물(자손)이 자신의 영역을 벗어날때 벗어난 내용물을 어떻게 처리할것인가 
• 종류 
• auto 
• overflow 가 발생했을때 스크롤을 자동으로 만들어준다. 
• hidden 
• overflow가 발생했을때 해당 부분들을 숨긴다. 
• 단, 해당 구역은 여전히 존재한 상태. 
• display : none 과는 다르다. 
• scroll 
• overflow가 발생하지 않았을때에도 스크롤을 만든다. 
• visible 
• 항상 보여준다.