WebApp/Web CSS (6) 썸네일형 리스트형 css의 이해- 중복의 제거 새로운 파일 style.css를 추가하고 기존 html 파일의 란에 위와같은 링크를 추가하면 stlye.css의 하나의 파일에 같은 을 쓰는 html 파일들과 쉽게 연결시킬 수 있다. css의 이해-반응형디자인 1.mediaquery와 @media의 해석 mediaquery란 어떠한 조건을 갖추었을때만 작동하도록하는 css이다 @media(max or min -width:600px){ #pw{display:block;} } 해석:화면의 너비가 600px보다 작을때 혹은 클때 #pw의 화면의 속성을 block으로 하라는 의미 이다 *문제발생 실습과정중 아무리 수정을 해도 mediaquery가 chrome에서는 작동하지 않았고 혹시나 하여 익스플로러로 열어보니 익스플로러에서만 작동하였다. *해결 구글링을 통하여 안에 를 추가해야한다는 것을 알게되어 실행하니 정상적으로 작동하였다. css의 이해-grid 1., tag ★ tag는 ★이 block 속성을 가지게 하는 tag 이며 ★ tag는 ★이 inline 속성을 가지게 하는 tag이다. 2. display:grid gird방식은 하나의 부모 div 안에 있는 자식 div를 묶는 것으로 위 방식은 grid-template-columns 방식으로 기억할 것 이를 표현하는 값으로 fr을 쓰는데 fr이란 비율을 나타내며 예를 들어 grid-template-columns : 2fr 1fr; 이란 2:1의 비율을 나타낸다 ※최신동향 html css등을 확인할 수 있는 사이트 https://caniuse.com/#home css의 이해- box model 1. border(테두리) html의 tag는 기본적인 성격에 따라 border가 화면전체를 쓰기도 하고 자신의 content 만큼의 크기만큼을 쓰기도 한다 ex). h1=화면 전체 크기 a=자기 자신 크기 이때 화면전체의 테두리를 쓰는 tag : block level element 자신의 content만큼의 테두리를 쓰는 tag : inline element 라고하며 display:blcok or inline 의 입력으로 그 성격을 바꿀수 있다. 2. box model css의 의미 ●padding: x px; 은 텍스트와 테두리 사이의 간격 ●margin: x px;은 테두리와 그 바깥 공간과의 간격 ●width:x px;은 테두리 자체의 너비 ●height:x px:은 테두리 자체의 높이 css의 이해-selector 1. css selector인 class의 해석과 응용 예제1의 경우 ● HTML를 해석하자면 a tag를 saw 라는 그룹(class)로 묶는다 라는 뜻이고 ● 를 해석하자면 saw라는 class로 묶인 모든 tag에 대하여 color를 blue로 한다 라는 뜻이다. 또한 HTML 와 같이 하나의 tag에 2개 이상의 class이름을 지정할 수 있고 구별은 띄어쓰기로 표현한다 2. css selector의 우선순위 같은 그룹의 경우는 마지막 즉 가장 최신의 것이 우선순위를 가지며 다른 그룹의 경우는 id>class>element(직접 tag를 지정하는 경우 예제1의 a{} selector) 순서의 우선순위를 가진다 3. selector의 응용 예제2의 #pw ol 로 작성된 selector는 id가 p.. css의 이해 1. css란 html의 디자인적 tag를 이용하는 것보다 디자인에 특화된 새로운 언어를 만드는 것이 효율적이고 따라서 그 언어가 바로 css인 것 2. css의 해석 예제 1의 경우 사용자는 Web browser에게 html의 언어로 "style tag 안에 있는 것은 css니까, 너는 그 안에 있는 내용을 a라는 tag에 css의 문법에 맞게 해석하고 적용시켜야 해"라고 말하는 것이다. 이경우 a는 css의 효과를 누구에게 줄 것인지 선택한다는 의미에서 selector(선택자)라고 부르며 그 selector에게 지정될 효과(color=red;)를 declaration(선언,효과)이라고 한다. 예제 2의 경우 body tag 안의 2번째 list tag에 있는 ★="☆"은 html의 속성을 의미하는 것.. 이전 1 다음
