HTML17 [HTML/CSS] id와 class의 차이점 HTML에서 특정 태그에만 특정 기능을 주고 싶을 때 id 값이나 class명을 통해 특정 기능을 부여할 수 있다. id나 class를 사용하는 방법은 다음과 같다. 철수 사용하고 싶은 태그 안에 class = "클래스 명" id = "아이디 값"을 주는 것이다. id나 class로 할 수 있는 것은 특정 기능을 부여할 수 있다고 위에서 하였다. 그러면 어떻게 하는가? id, class 불러오는 방식 id나 class는 css를 통해 처리를 해야한다. 철수 영희 id나 class를 style 태그로 불러올 때는 규칙이 있다. id를 불러오고 싶다면 id값 앞에 (#)을 붙이고 class를 불러오고 싶다면 class 명 앞에 (.)을 붙여야 한다. style 태그안에 있는 내용을 해석해보자면클래스 명이 '.. 2022. 7. 19. [HTML/CSS] HTML과 CSS로 네이버 로그인 화면 만들어 보기(JS x) 한 2~3주 동안 배운 내용을 토대로 네이버 로그인 화면을 만들어 보았다. HTML이랑 CSS로만 만들어서 디자인에 중심을 두었다. 원래 만드려고 했던 로그인 화면은 아래와 같았는데 아직 기초단계이다 보니 조금 힘들 것 같아 상대적으로 쉬운 아래 사진과 위의 사진의 특징을 몇개씩 골라 만들어 보았다. [HTML 코드] 한국어 English 로그인 로그인 상태 유지 더욱 간편한 로그인 비밀번호 찾기 | 아이디 찾기 | 회원가입 이용약관 | 개인정보처리방침 | 책임의 한계와 법적고지 | 회원정보 고객센터 Copyright © NAVER Corp. All Rights Reserved. 아이디 입력 창 위의 NAVER 로고를 눌렀을 때 메인 페이지로 이동하기 위해 링크를 첨부했다. 아이디/비밀번호/회원가입/fo.. 2022. 7. 18. [WEB/JS] 출력/이벤트 처리 자바스크립트는 HTML 위에서 동작하기때문에 HTML 코드 중간에 코드를 작성해주면 된다. 아래처럼 HTML 코드가 있을 때 자바스크립트를 중간에 삽입하고 싶으면 body태그 안에 script태그가 위치해 있는 것을 볼 수 있다. script 태그 안에는 document.write()라는 문법이 나와 있는데 이것은 출력을 의미한다. 자바로 치면 System.out.print() 느낌(?) 웹페이지에서도 출력된 것을 확인할 수 있다. *자바스크립트는 HTML과 달리 계산도 출력해준다. JavaScript HTML 1+1 자바스크립트와 HTML 모두에게 1+1이라는 코드를 입력했을때 HTML은 1+1을 그대로 출력하지만 자바스크립트 같은 경우는 1과 1을 더한 2가 출력이 된다. 자바스크립트는 이벤트도 처리.. 2022. 7. 6. [WEB/CSS] 그리드(Grid) 사용하기 우선 그리드 개념을 이해하기 위해 아래 코드를 입력하고 결과를 확인한다. NAVIGATION ACTICLE 그리드를 사용하기 위해서는 style 태그안에 있는 #grid에 코드를 추가해야한다. 위 코드의 grid-template-columns: 150px 1fr의 의미는 첫번째 컬럼인 NAVIGATION은 150px의 공간을 가지고 두번째 컬럼인 ACTICLE은 150px을 제외한 나머지 공간을 가진다는 의미이다. 그래서 결과를 보게 되면 잘 나온 것을 확인할 수있다. 만약 grid-template-columns: 2fr 1fr이라면 첫번째 컬럼인 NAVIGATION은 2fr과 1fr을 합친 3fr 중 2fr의 비율(2/3fr)을 갖는다라고 생각하면 된다. 두번째 컬럼인 ACTICLE은 2fr과 1fr을.. 2022. 7. 3. 이전 1 2 3 4 5 다음
