CodeTech/HTML\CSS (29) 썸네일형 리스트형 CSS - 8 [States, Transition, Transformation] States - 웹페이지에서 inspect다음에 우측 하단에 요소를 누르고 :hov를 누르면 우측하단 처럼 state 상태가 나온다. - 버튼을 누르고 있으면 상태가 변한다. 이렇게 다양한 상태를 꾸미고 싶을 때 사용하는 selector가 있다. - active, hover, visited, focus, focus-within 이렇게 5가지 상태가 존재한다. active : 버튼을 눌러 활성화 되었을 때 hover : 마우스를 올려만 두었을 때 focus : 키보드로 선택되었을 때 visited : 링크에만 적용이되며 링크를 타고 해당 사이트를 방문하면 링크의 색이 바뀌는 상태 focus-within : 부모에만 적용이된다. attributtes:state {} - 상태에 따라 바뀌는 것을 특정하거나 꾸.. CSS - 7 [Colors, Variables] CSS에서 알아야할 colors system 3가지 1. color 이름 이런식으로 color의 이름을 그대로 css에 넣는 방식이 있다. - 이방식은 사람들이 직접 색에 이름을 지었다 2. hexadecimal code (16진 코드) 이렇게 16진수 법으로 색을 표현하는 형식이다. - 디자이너들이 color point(크롬 확장프로그램등)종류의 프로그램으로 색을 따와서 넣는경우 컬러코드가 복사된것을 넣을 수 있다. 3. rgb rgb 형식으로 컬러를 표현 가능하다. - rgb에는 투명도 조절도 가능하다. 정확히 말하면 rgba에서 가능하다. - rgba(색, 색, 색, 투명도) 테마를 선정하여 같은 색을 element에 여러 번 많이 사용할때 색깔을 한번만 수정해서 다양한 element의 색을 한번에.. CSS - 6 [pseudo selectors, attribute selectors] pseudo selectors - element를 세부적으로 지칭할 때 사용한다. tag: 요소 { } tag: last-child{ } - 와 같은 형태로 사용하게 되며 그중 last-child는 여러 태그들중 가장 마지막의 태그를 지정한다. - html코드는 건들지 않고 css 코드 안에서 태그의 css를 바꿀수 있으므로 id, class 따위보다 위와 같은 방법이 훨씬 나은 방법이다. tag : nth-child(숫자){ } - 해당 숫자 번째의 태그를 지정한다. - nth-child(even) : 짝수 번째 태그만 지정한다. - nth-child(odd) : 홀수 번째 태그만 지정한다. - nth-child(3n) : 3의 배수번쨰 태그만 지정한다. - nth-child(2n + 1) : 2n +.. CSS - 5 [layer, position : fixed, static, absolute] position: fixed - 페이지가 매우 길어 스크롤링을 해야하는데도 같은 위치에 계속 머물러 있는것.(adsense 같은 광고, 메뉴) - position이라는 attribute에서 사용가능 - 스크롤이 내려가고 있는데도 위치를 고수하는 박스 Layer - top, bottom, left, right attribute 중 하나라도 수정한다면 다른 레이어에 있게됨. - 아래 경우는 위에 있는 div가 있으므로 top혹은 bottom을 수정하면 다른 레이어에 있게됨. - 두 박스는 같은 레이어에 있는것이 아니다. 서로 다른 레이어에 있다. - inline이므로 좌우가 신경쓰이게 되니 left에 값을 설정해주면 레이어가 다르게 설정된다. position: static - position의 default.. CSS - 4 [inline, block, Flexbox, Wrapping, Flex-grow] block vs inline vs inline-block block inline inline-block 상하좌우 마진/패딩 ✅ ❌ ✅ 너비와 높이 ✅ ❌ ✅ 줄 바꿈 ✅ ❌ ❌ 기본너비가 부모너비 ✅ ❌ ❌ 요소 사이 공백 ❌ ✅ ✅ inline-block 인라인은 높이와 너비를 가질수 없다고 했다, 하지만 높이와 너비를 가진 상태로 박스들을 옆으로 붙이고 싶다면? 인라인 블럭은 - 높이와 너비 - 옆에 다른요소도 올 수 있고, - margin도 올 수 있다. 하지만 inline-block은 별로다. - default값에서 두요소 사이에 위와 같이 빈공간이 있다. (우리는 이러한 공간을 만든적이 없다. margin이 아니다.) - 위와 같은 빈공간이 요소의 크기마다 일정하지 않다. (요소가 커질수록 이러.. CSS - 3 [Class] 여러 tag들중 일부는 파란색 글자, 일부는 주황색 글자로 하고 싶을 때 변경을 하고 싶다면 물론 id로 처리 할수는 있다. 하지만 중복되는 경우가 생긴다. 이렇게 #f1, #f3{ 내용 } id를 한꺼번에 적을수 있지만 span에 모두 id를 달아줘야 한다는 번거로움이 있다. 이럴 때 하나를 가르키면서 여러 태그를 가르킬 수 있는 방법이 Class 이다. Class - 여러요소들에서 사용가능하다. 1. 하나를 가르키면서 여러 태그를 가르킬 수 있다. 2. 한 클래스에 여러 클래스 이름을 붙일수 있다. 1. 하나를 가르키면서 여러 태그를 가르킬 수 있다. - 이렇게 클라쓰 있게 한번에 가르킬 수 있다. 즉, #text : id = "text" .text : class = "text" 2. 한 클래스에 여.. CSS - 2 [Box - Margin, Border, Padding] CSS는 영역으로 나눌수 있다. 크게 블럭 이라고 부르자. 위 웹사이트를 보면 다양한 구분으로 블럭가 나뉘어 진것을 알수 있다. 이것은 실제로 이런식으로 블럭이 나뉘어 코드된 것을 알수 있는데, HTML에서 가장 기본적인 블럭는 였다. 실제 만들어보면 이렇게 3개의 기본블럭을 만들고 배경을 설정하면 몇개의 블럭에 설정이 될까? : 모두다 설정이 된다. CSS에서 div를 가리켜 배경색을 바꿨으므로 모든 div태그들은 배경색이 바뀐다. Block : 옆에 아무것도 올 수 없다. 위그림을 보면 한개의 블럭이 잇으면 그영역상 해당 자리의 옆은 아무것도 오지 않는다. 이러한 특성은 모든 블럭들에게 적용된다. 등등.. Inline (in the same line) : 같은 줄에 있다. 블럭이 아닌 span tag.. CSS - 1 [How to contact HTML and CSS] HTML 뼈대를 만들었으니 근육을 붙여야 한다. HTML과 CSS를 연결하는 방법은 2가지 방법이 있다. 1. inline CSS : HTML 파일안에 CSS 코드를 작성하는 방법 2. external CSS : 따로 CSS파일을 만들어 HTML에 link tag로 연결하는 방법 보통 2번을 많이 한다. 물론 두가지 방법 모두 사용한다. - 따로 파일을 만들어두면 HTML파일 코드가 복잡해지는 것을 막는다. (보기편하다) - 같은 CSS파일(같은 형태)을 다양한 HTML에 적용할 수 있다.(똑같은 코드를 여러번 HTML파일안에 넣으면 코드가 많아진다) 두가지 방법 모두 배워보자 1. inline CSS: HTML 파일안에 CSS코드를 작성하는 방법. html 태그안의 head 태그안에 간단하다. 2. e.. 이전 1 2 3 4 다음
