웹개발/HTML, CSS 응용 (7) 썸네일형 리스트형 [html, css 응용] 7. box-shadow 오늘 강의에서는 box-shadow 속성에 대해 알아보자! box-shadow는 말 그대로 박스그림자라는 의미이다. css 박스에 그림자를 값으로 설정하므로써 입체감과 웹사이트의 퀄리티를 높일 수 있다. 소스코드 li{ background-color: rgb(223, 136, 124); border-radius: 4px; margin: 32px; padding: 16px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } # 위에 코드를 설명하자면 그림자에 대해 크기를 오른쪽으로 1px 아래쪽으로 1px 흐림정도를 4px 로 설정하고 rgba를 통해 그림자의 색상과 투명도를 설정한다. # rgba 는 rgb + 투명도이다. 실행결과 before after 입체감 뿜뿜. [html, css 응용] 6. 마진 상쇄 이번 강의에서는 마진 상쇄에 대해 알아보자! 개발자도구를 보면 il에 margin을 30px로 설정했는데 요소들끼리 서로 마진이 겹쳐 60px가 아닌 30px로 나타나고 있다. 이를 마진상쇄라고 하며 마진상쇄가 일어나는 조건을 아래에 정리해 보겠다. 마진 상쇄 특징 1. block element와 block element 사이에서만 발생된다. 2. 인접 요소의 수직 마진에 대해서만 발생된다. 3. 수평, inline to block, inline to inline에서는 발생하지 않는다. 4. 인접한 두 요소의 마진이 서로 다를 때 마진 상쇄가 발생된다면 항상 큰 쪽이 우세하다. 5. display에서 inline-block은 마진 상쇄가 일어나지 않는다. 예시 1~5 모두 속성을 바꾸며 실습해보니 확인할.. [html, css 응용] 5. css - block, inline 이번 강의에서는 block element, inline element를 배워보자. html 요소중에는 크게 block 요소와 inline 요소가 있다. block 요소에는 p, h1 등이 있고 inline 요소에는 img, a 등이 있다. block요소는 특징은 full line, new line 이고 inline요소는 둘 다 해당되지 않는다. full line 이란 하나의 요소가 한 줄을 모두 사용하는 것을 뜻하고 new line은 여러 block요소들이 있으면 그만큼의 new line을 요구하는 것을 뜻한다. 예시) p가 차지하는 영역 vs a가 차지하는 영역 ( 파란 박스 ) inline의 주요 특징 1. top, bottom에 margin 속성이 적용되지 않는다. 2. padding을 적용하였을 .. [html, css 응용] 4. css 선택자, 결합자 오늘은 선택자와 결합자에 대해 알아보았다. 둘 다 여러 요소를 선택할 때 사용하는 것으로 선택자는 앞에서 id와 #를 이용하는 방법으로 배웠다. 이번에는 class, 결합자 등을 통해 여러 요소에 css 규칙을 적용시키는 방법을 실습해보자. 1. 선택자 실습 : class를 이용하여 4개의 li중에 가운데 2개만 색상을 다르게 해보자. Tueday, January 2nd I'll Finish Section 3 Wednesday, January 3rd I'll Go To Seoul With Gy Girlfriend Thursday, January 4th Dive Deeper into HTML & CSS And Build More Complex WebSites Friday, January 5th Practi.. [html, css 응용] 3. css 박스 모델 html 요소는 모두 박스모양으로 이루어져 있다. 개발자 도구 (F12)를 통해 들어가보면 다음과 같이 그림 형태로 나타난다. margin : 공간에 대한 의미로 content의 바깥 공간에 대한 정의이다. padding : content의 내부 공간으로 실제 몸집이 커진다. border : content의 테두리이다. # padding과 margin 옵션을 1개 주면 4방향 모두 해당 px로 지정되고 옵션을 2개 주면 아래-위, 양옆 세트로 지정되고 옵션을 4개주면 위쪽부터 시계방향으로 px조정이 가능하다. [html, css 응용] 2. css의 inheritance, cascading, specificity 1. inheritance ( 상속 ) 상속이랑 상위 요소의 속성이 자식 요소에 반영되는 것을 의미한다. 자바의 상속과 같은 맥락이다. 개발자 도구 F12를 눌러 html코드를 확인해 보자. 작성한 코드중 가장 하위 요소인 를 살펴보면 상속 위치라고 표시 된 요소가 body, ol 두개이다. body를 보니 실선과 투명색인 것으로 보아 직관적으로 상속이 잘 되지 않는다는 것을 느낄 수 있다. 왜일까? # 개발자도구 - 스타일 부분을 살피면서 text-align이 따로 명시 되어 있음을 알 수 있었다. # 코드를 슥 보면 부모요소와 맞춤인 것을 파악할 수 있다. ( 이게 상속보다 힘이 쎈가? 에 대해 의문했다면 천재 ) # 의 속성을 통해 자식 의 속성을 같이 정의할 때 편리한 요소이구나. 이래서 목록화하.. [html, css 응용] 1. 리스트 이해하기 응용으로 넘어가기 앞서 VIEW - EXTENSION 에서 Live Server을 설치하자. 장점 vscode에서 코드를 수정한 뒤 저장하면 변경 내용이 즉시 업데이트 된다. 배포x 로컬에서 실행된다. ( 테스트 용이 ) 리스트란? 우리가 to-do-list 또는 버킷리스트 등을 적을 때 그냥 A4 용지에 적으면 맛이 안난다. 그래서 우리는 몇가지 종류의 list를 사용하는데 크게 1. 2. 3. 과 같이 순서로 구분되는 것과 ● 로 구분되는 것이 있다. html 요소로는 각각 ol, ul 태그를 통해 사용할 수 있다. ol은 ordered list 로 순서가 존재하여 1. 2. 3. etc... 으로 표현되고 ul은 unordered list 로 순서 x 인 리스트이다. ul은 왜 필요할까? 과일과 같.. 이전 1 다음
