본문 바로가기

WEB기초/HTML , CSS3

[간단한 웹] 라이브러리 없이 TODOlist 만들기 웹계의 Hello World! 라고 불리는 To Do List를 만들어보았다. 사용한 언어는 HTML, CSS, Javascript 1. HTML My To Do List - 태그로 먼저 제목이 될 부분 (정적인 부분)과 리스트를 포함할 부분(동적인 부분)을 CSS로 처리하기 쉽도록 나눴다. - 제목이 될 부분에는 제목과 텍스트박스, submit 버튼을 넣어주고 'title'이라는 classname을 정했다. 텍스트박스의 경우 placeholder를 써야 텍스트박스에 힌트처럼 흐릿한 글씨, 클릭하면 없어지는 글씨를 넣을 수 있다고 한다. - 리스트가 될 부분은 body라는 classname을 정하고 태그를 넣어 'list'라는 idname을 넣었다. 2. Javascript submitClicked = .. 2020. 6. 10.
CSS의 기본 문법 정리(선택자, 효과, 박스모델, 그리드, 미디어쿼리) 코딩을 하는 데에 있어서 영어로 구글링하는 것은 필수적이다. 하나부터 열까지 모든 것들을 '기억'하겠다는 생각보다는, 내가 원하는 것을 다시 검색해서 찾을 수 있도록 핵심 문법을 검색용어로 사용할 수 있도록 익혀두는 것이 중요하다. * CSS (Cascading Style Sheet) HTML로 작성된 문서가 '어떻게 표현'할 지 방법을 정해주는 언어이다. * 기본 문법 의미 : a태그들에 대하여 텍스트의 색깔을 빨간색으로 만든다. * 선택자(Selector) css를 적용할 태그를 선택하는 문법이다. 대표적으로 태그 선택자, ID 선택자, 클래스 선택자가 있다. 1. 태그 선택자 우리는 어떤 특정한 태그들에 대해서만 한꺼번에 css코드를 적용하고 싶을 때가 있는데, 그 때 사용하는 것이 ID, clas.. 2020. 5. 17.
HTML의 핵심 용어와 문법을 정리해보자(태그, 속성, 선택자) 코딩을 하는 데에 있어서 영어로 구글링하는 것은 필수적이다. 모든 것들을 '기억'하겠다는 생각보다는, 내가 원하는 것을 다시 검색해서 찾을 수 있도록 핵심 검색용어들만 익혀둔다면, 코딩이 어렵지 않을 것이다. * HTML HyperText Markup Language html은 웹 브라우저를 통해 사람들에게 정보를 제공하기 위해 만들어진 마크업 언어이다. 코드의 순서배치와 논리의 흐름으로 작성하는 다른 프로그래밍 언어와 다르기 때문에, 프로그래밍 언어가 아닌 마크업 언어라고 말한다. * 태그(Tag) Syntax content HTML을 구성하는 가장 기본적인 문법이다. h1~6 : 큰 제목 ~ 작은 제목 p : paragraph 문단 a : anchor 링크 div : css와 연계하여 여러 문서 '형.. 2020. 5. 17.