본문 바로가기

전체 글

 (99)
css-미디어 쿼리(반응형 웹) 반응형 웹: 화면의 크기에 따라 웹페이지 요소들이 반응해서 동작한다. @media(min-width:800px){ div{ display:none; } } 화면의 픽셀이 800보다 커지면 사라지게 하는 코드 @media screen and (min-width:800px){ .container{ width: 50px; } } screen/speech/print/all and/not/only/, style.css로 파일을 만들어 css코드의 중복제거 가능 캐싱 : 저장하다 라는 뜻 한번 파일 다운받으면 파일이 바뀌기 전까지는 웹브라우저가 컴퓨터에 저장해놨다가 파일을 요청하면 저장된 파일을 불러와 속도를 높힐 수 있다. 따라서 네트위크 트래픽을 적게 사용한다. moblie 320px~480px tablet 7..
css-그리드 div : 의미없는 태그로 줄바꿈을 위한 태그/하나로 묶어주는 기능도 함 block level element span : 의미없는 태그로 줄바꿈을 위한 태그/하나로 묶어주는 기능도 함 inline element 예제 코드 NAVIGATION article grid-template-columns:150px 1fr; 는 컬럼의 부피를 결정해줌 예제코드2 WEB HTML CSS Javascript CSS 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정..
css-박스모델 border:테두리 boreder-width: 테두리 두께 border_color: 테두리 컬러 border_style:테두리 스타일(단선, 실선) border: 5px solid red:로 압축가능(순서 상관없음) h1과 a가 같은 내용이면 h1,a {}로 묶어서 사용 가능 block level element::화면 전체를 쓰는 태그 inline element:자기자신만큼 크기를 갖는 태그 display:block/inline/none; 으로 바꿀 수 있음 none은 안보이게 함 padding: 콘텐츠와 테두리 사이의 여백 margin: 테두리와 테두리 사이의 간격 h1{ border:5px solid red; padding:20px; margin:20px; display:block; width:100..

티스토리툴바