홍강zone

웹페이지가 수천개가 있을때 수정사항이 생긴다. style.css 파일을 새로 만들어서 style태그를 복사한다.태그는 제외한다. "기존 style 태그가 들어가야 될 자리에 style.css라고하는 별도의 파일에 저장된 css를 다운받아서 여기에 원래 그 코드가 있었던 것처럼 동작해" 라고 인식을 시켜주는 link를 입력해준다. 내부적으로 구현이 완전히 달라지면서 훨씬 효율적인 상태가 된다. 누군가 와서 수정사항을 요청하면 style.css에 가서 수정만 하면 모든 link를 건 웹페이지에 적용이 된다.

화면사이즈가 800px보다 작을때 @media(max-width:800px) 아이디값이 grid인 태그의 display가 grid였던것이 block로 바뀌게 한다. ol태그의 border-right태그를 사라지게 만든다. h1태그의 border-bottom태그를 사라지게 만든다. @media(max-width:800px){ #grid{ display:block; } ol{ border-right:none; } h1 { border-bottom:none; } } WEB HTML CSS JavaScript CSS 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹..

화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는것을 반응형 웹, 반응형 디자인이라고 한다. 화면의 크기에 따라서 보였다 안보였다 하기위해 div태그를 만들어주고 style로 속성을 정해주고 개발자모드를 띄워주면 화면의 크기가 표현된다. 화면의 크기가 800px보다 크다면 display:none; 으로 하고싶다 그렇다면 화면의 크기가 최소한 800px이다 @media(min-width:800px) min=최솟값 width=폭 max=최댓값 Responsive

그리드로 나란히 놓을 태그를 아무 의미없는 div 태그로 묶어준다. h2태그와 p태그를 div태그로 묶어주고 그 div태그와 나란히 놓을 ol태그를 또 다른 div부모태그로 묶어준다. 두개를 묶은 부모 div태그를 grid로 지정하기 위해 id값을 grid(아무거나가)라고 준다. 스타일 태그안에 #grid{}를 설정해주고 display:grid; 그리드를 적용시켜주고 grid-template-columns을 순서대로 설정해준다. HTML CSS JavaScript CSS 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. 현재 개발 중..

문자에 테두리를 쓰고 나란히 배치하려면 각각 어떤 태그로 묶어줘야된다. div태그는 block으로 적용되는 h1대신 쓸 수 있는 아무런 의미가 없이 단지 디자인의 용도로만 쓰는 태그이다. 화면 전체를 사용해 줄바꿈이 일어난다. span은 inline으로 적용되는 태그이다. NAVIGATION ARTICLE 이것을 나란히 하기 위해서 그리드(grid)를 사용해준다. div태그의 부모태그를 만들어주고 id값을 설정해준뒤(id이름은 아무거나 넣는다) id의 스타일값을 지정해준다. NAVIGATION ARTICLE display:grid; 를 설정해주고 grid-template-columns:값; 을 지정해주면 하나의 columns(단)의 크기를 설정할수있는데, 값에 첫번째단 두번째단의 크기를 순서대로 넣어주며..

새로운 파일을 만들어준다 html의 기본적 코드를 갖고있다. h1태그는 줄바꿈이 되었고 a태그는 줄바꿈이 되지 않았다. 이런 차별이 존재하는 이유는 h1태그는 제목 태그인데 제목 태그는 화면 전체를 쓰는것이 편리하기 때문이다. CSS 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. CSS 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. h1태그는 화면 전체를 사용하는 태그고/* block level element */ a태그는 자기 크기만큼을 사용하는 태그다./* inline element */ h1태그를 자기 크기만큼 쓰고 싶다면 display:i..

봤던 링크를 회색으로 만들고 싶다면 HTML로 class="saw" 라는 속성을 넣어주고 saw라는 class값을 가지고 있는 모든 태그에 대해서 폰트 컬러를 그레이로 주는 .saw { color:gray; } 적용해준다. .saw { color:gray; } 온점 . 을 붙이지 않으면 적용이 되지 않는다. 이유는 saw라고 쓰게되면 웹페이지에 모든 saw라는 이름의 태그를 선택하는 선택자이기 때문이다. class = . 머물고 있는 페이지를 빨간색으로 이것만을 표시하고 싶다면 class="saw active" 속성을 넣어주고 .active { color:red; } 적용해준다. .active { color:red; } class라는 속성의 값은 여러개의 값 ex)saw,active이 들어올 수 있고 띄..

모든 h1태그를 크게 하고싶다면 여기에 모든 h1태그를 가운데 정렬 하고싶다면 이러한 모든 property를 외울필요는 없다. 구글링을 해서 속성을 스스로 알아내는 것 또한 중요하다. css text size property css text center property 등 검색해서 알아낼 필요가 있다. 편집기 또한 속성과 값을 자동완성 시켜준다.