줘니 개발블로그

선언방식에는 3가지가 있다. 내부 방식, 외부 방식, 인라인 방식. 이제까지는 공부와 실습 때는 양도 별로 없고 외부로 만들면 왔다갔다 불편하기 때문에 head태그안에 style태그를 만들어(내부 방식) 남의 집에 얹혀살았었다면, 이제는 실무에서 실제로 사용하는 선언방식을 배워보겠다! 1. 내부 방식 head태그안에 style태그를 만들어 남의 집에 얹혀사는 것! 내부방식은 실무에선 사용하지 않는다. 2. 인라인 방식 : 요소 내에 직접적으로 스타일을 지정하는 것 * 긴급 시 사용함(우선순위가 높아 인라인방식이 최종적으로 보여지게 됨) 바디태그 안 요소 내에 직접적으로 style을 지정해주면 되는데 이렇게 head태그 안 style태그에 h1을 오렌지색으로 지정했음에도 불구하고 인라인 방식의 파란색 지정..

Position : 위치를 배치하는 속성 position은 4가지로 구성되어 있다. static, relative, absolute, fixed! 1. static : 정적인 (position의 기본값) - 위치 속성이 비활성화(움직이지 않음) #static{ top: 20px; left: 15px; } static에 위치값을 넣어줘도 움직이지 않는 결과가 나온다. 2. relative : 상대적인 - 위치 속성이 활성화(움직임) - 기준 : 원래 있던 위치 (tip! 기준점을 모르겠을 때는 0,0으로 이동해보면 됨) #relative{ position: relative; top: 20px; left: 20px; } 위에 있는 사진 위치를 보면 원래 있던 위치를 기준으로 설정한 값이 움직이게 된 걸 볼 ..

CSS 직전 게시물에 display 속성을 다뤘는데 사실 display 속성에는 block, inline, none 그리고 하나가 더 있다! 그게 바로 1. Flex (flex는 중요하기 때문에 따로 빼서 적어둘거다.) flex : 레이아웃을 배치해주는 전용 기능 flex는 2가지 요소로 구성되어 있다. container와 item! - item : 내가 움직이고 싶은, 배치하고 싶은 요소 - container : 그 item의 부모요소 한 가지 요소는 item이자 container일 수 있다! 이 사진으로 설명을 해보자면, 파란네모가 item, 빨간네모가 파란네모의 container 초록네모가 item, 파란네모가 초록네모의 container 이다. 말장난 같지만,, 이렇게 이해하는 게 훨씬 쉬울 것이..

도대체가 끝난 줄 알았다 하면 또 나오고 또 나오고.. 끝이 없는 다꾸 ~.. 아니 웹꾸 ~^^ 1. 계층선택자 우리 반 규칙! 지각하지 않기! 결석하지 않기! 불가피할 땐 쌤한테 꼭 연락하기! 복습하기! 이 바디 태그를 가지고 오면 ↓ 1) 자손선택자 - 기호 : 띄어쓰기 div를 기준으로 자손인 span, li 색 바꾸기 헤드 태그 안에 스타일 태그를 만들고 그 안에 선택자와 선언을 쓴다. 2) 자식선택자 - 기호 : > ol을 기준으로 자식인 span의 색 hotpink ol>span{ color: hotpink; } 3) 근접후행선택자 - 기호 : + li를 기준으로 근접해서 붙어있는 li의 색 green li+li{ color: green; } 4) 후행선택자 - 기호 : ~ 첫번째 li를 기준..

나는 처음에 CSS도 프로그램을 새로 깔아서 하는 줄 알았다 ㅎ 아예 다른 과목이 아니고 HTML속에서 더 감각 있고 편리한 디자인을 위한 언어라고 부르기는 좀 그런., 기능?! 1. CSS란? : 쉽게 말하면 HTML 문서의 스타일을 꾸밀 때 사용하는 것(Cascading Style Sheets) * CSS의 기초작성 → 스타일은 설정이기 때문에 head 태그 안에 작성 다른 언어이기 때문에 style이라는 태그 내에만 작성 2. 선택자와 선언 나 디자인 할거야! - 무엇을? → 선택자★★ - 어떻게? → 선언 - 공식 : 선택자{ 선언(속성 : 값;) } 예시) body 태그안에 주황색을 쓰고, style 태그 안에 선택자(h2)와 선언작성 h2{ color:orange; background-colo..