웹 공부/HTML, CSS, JS (5) 썸네일형 리스트형 [Javascript/자바스크립트] HTML의 태그에 class를 추가,삭제하기 웹 개발을 할때 효과적인 코딩법은 html에는 html파일만 쓰고, css에는 스타일값들을 나타내는 css파일만 쓰고, js에는 로직만 처리할 수 있도록 분리하는 것이다. 그리고 그 js는 로직을 처리하며 html과 css를 조작할 수 있다. 간단한 예시를 알아보자. JS를 이용하면 HTML의 특정 태그요소에 class를 추가하거나 삭제,수정 등의 행동을 할 수 있다. 크게 두가지 방법이 있다. Element.className = 'class_names' - 기존에 class가 없으면 추가하고, 있으면 기존의 클래스를 변경(기존 클래스는 사라짐) Element. className.add('class_names') - 클래스에 'class_names'라는 클래스가 추가(기존 클래스는 그대로 유지) Elem.. [Javascript/자바스크립트] 실시간 시계 만들기 웹사이트를 만들때 초단위로 시간이 흐르는 시계를 만들고 싶을때는 자바스크립트를 이용하면 된다. 00:00:00 HTML 코드에 간단하게 div태그를 하나 만들어 준다. 우리는 Javascript를 통해서 저기 있는 00:00:00이라는 텍스트를 실시간으로 변하는 시계로 변환시킬겁니다. const clockContainer=document.querySelector(".js-clock"); const clockTitle=clockContainer.querySelector("h1"); function getTime(){ const date=new Date(); const minutes=date.getMinutes(); const hours=date.getHours(); const seconds=date.get.. [CSS] 반응형 웹 디자인과 미디어쿼리 스마트폰, 태블릿, 노트북 등등 많은 기기에서 웹사이트를 접속하고 이들은 모두 화면의 크기가 제각각이여서 그 크기에 따라 웹페이지가 다르게 동작할 필요가 있다. 미디어 쿼리를 사용하면 화면의 크기, 화면의 모드(가로,세로모드) 등의 화면 특성에 따라 특정 CSS코드가 적용되게 할 수 있다. @media(min-width:800px){ /*화면넓이가 800px 이상이면 안의 코드를 작동(?)시킨다*/ div{ border:5px solid red; } } 이 코드는 화면의 넓이가 800이상일때 5px 빨간색 테두리를 씌우는 css 코드이다. 위와같은 방법을 통해서 특정 상황에서만 특정 css코드를 적용시킬수 있다. Responsive [CSS] css파일의 분리저장과 캐싱 css를 삽입하는 방법은 3가지가 있다. External CSS Internal CSS Inline CSS 이 방법들 중에선 보통 External(외부) CSS 방식을 사용한다. 적용방법은 html코드의 head태그 안에 아래와같은 코드를 적으면 된다. css코드를 별도의 css파일로 분리해서 저장하면 코드의 중복을 피할수 있고, 스타일을 수정해야 할 일이 생길때 css파일에서 수정을 단 한번만 해도 모든 웹페이지에서 스타일이 변한다는 장점이 있다. 그리고 새로운 html파일을 만들고 그 파일에 스타일을 적용하고 싶을때 위의 코드 한줄만 추가하면 간단하게 적용할 수 있다. index.html 1.html 2.html 3.html 등등 많은 html파일에서 style.css파일을 External 방식으로 .. [CSS] 그리드(Grid) 화면의 레이아웃을 구성할때 여러가지 방법이 있다. 약간 구식(?)의 방법으로는 float 속성 이라던가 display를 inline-block으로 설정하는게 있다면 나름 신식(?)의 방법으로는 CSS Flex랑 CSS Grid가 있다. 구식이라고 해서 중요하지 않은건 아니라고 하니깐 float이랑 inline-block도 공부 해야겠네...ㅎ Flex랑 Grid의 대표적인 차이점은 Flex는 한 방향 레이아웃 시스템 (가로 또는 세로) Grid는 두 방향 레이아웃 시스템 (가로X세로) Flex는 아파트,기차같은 1차원이라고 생각하면 되고, Grid는 표,행렬같은 2차원이라고 생각하자. 이번 글에서는 Grid를 간단하게 1차원으로만 적용 해 보았다. NAVIGATION ARTICLE display:grid.. 이전 1 다음
