생활코딩6 생활코딩 Web2 CSS 완강 / 결과물 사이트의 첫 페이지(인덱스)강의에서 원하는 내용으로 페이지를 만드라고 하셨는데, 눈에 들어온게 버지니아 울프의 올란도였다.그래서 위키피디아를 긁어다가 만듦. 두번째 페이지부터는 이렇게.작게 변화를 줘보았다. 이후로는 모두 동일한 디자인이다. 강의가 끝났는데. 선생님이 다음으로 넘어가지 말고 복습하라고 하셔서(?)어떤 페이지를 만들어볼까 하다가 유튜브 첫페이지를 따라해보기로 했다 ㅋㅋ 그래서 완성한 것 그림그리기마냥 그냥 따라 만들어본 것이다.이렇게 기존의 사이트를 따라 만들며 앞으로 어떤 것들을 배울지 짐작해보았다. 저 검색기능이랑, 더보기 열었다 접었다 하는 것? 또 목록을 촤르르 넘기는 것? 부족한 점이 많지만 그럴듯해서 만족스럽다.빨리 익히고 다양한 것들을 배우고 싶다! 이하 스스로 찾아서 익힌 것.. 2019. 2. 11. CSS 미디어쿼리 중복제거 생활코딩_Web2_CSS_12.미디어쿼리_필기노트 반응형 @media(min-width:500px) { div { display:none } }min-widthmax-width 생활코딩_Web2_CSS_12.중복제거_필기노트 style.css 로 파일을 새로 만들어 저장 그 자리에 대체할 것 내가만든 페이지에 적용할 경우.... 10개의 파일의 꾸밈? style을 한 번에 관리할 수 있다. 이런거 너무 좋잖아.. 흑흑 2019. 2. 9. 그리드grid 그리드grid생활코딩_web2_css_10.그리드_필기노트 div block level span inline display:grid; grid-template-columns: 150px 1fr; 150px 1fr 왼쪽 150px로 고정 1fr 1fr 1:1 2fr 1fr2:1 div id="" 로 그리드 구분#grid>ol {} 로 ordered line 구분 도움이 되는 사이트 : caniuse.com 현재까지 진도를 따라가며 만든 나의 웹페이지하..어썸하다 증말... 🤩🤩 2019. 2. 8. css 박스모델 생활코딩_web2_8.박스모델_필기노트 /* block level element */ h1 { border-width:5px; border-color:red; border-style:solid; display:inline } /* inline element */ a { display:none } 참고: /**/ : css 중복을 줄이자 박스 padding:200px; 박스와 박스내부의 컨텐츠 사이의 간격 inline으로 적용해봤을 땐 윗부분이 짤려서(?) 나옴... margin 값 조정해도 짤림 width:10px; padding값이 우선이고(순서바꿔서해봄), 박스 오른쪽 부분이 마지막 글자로부터 10px 떨어짐 margin:100px; 박스와 박스 외부의 컨텐츠 사이의 간격 페이지에서 오른쪽버튼 - 요.. 2019. 2. 8. css 선택자/selector CSS 선택자/selector 필기노트생활코딩_wed2_7.CSS 선택자의 기본 font-size:2000pxtext-align:center .class.saw { color:grey; }class="saw" .active { color:red; }class="saw active" #id우선순위 - 원래는 마지막에 입력한 선택자가 우선 적용됨. 순서에 상관 없이 우선으로 적용하고 싶으면 태그 > class > id문서 내에서 id는 중복적용 안됨. 한 번만 등장해야함 #active { color:red }id="active" css selector 종류/예제 2019. 2. 8. 이전 1 2 다음
