일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- express
- API
- node.js
- NextJs
- JavaScript
- CSS
- clonecoding
- react
- Session
- GRID
- form
- TypeScript
- ECMAScript
- Mongoose
- graphQL
- frontend
- javscript
- backend
- nodejs
- Component
- ES6
- 자바스크립트
- 리액트
- DART
- HTML
- MongoDB
- pug
- heroku
- CLONE
- Flutter
- Today
- Total
목록HTML (57)
Enjoy Programming

오늘 만들어할 레이아웃이다.~~만들어보자~ 조건읜 외부 스타일 시트 사용과 pseudo selector를 사용하고 position속성을 사용해야 한다. 아 꽤나 빡셌다.. 이게 맞는지는 모르겠지만 ..뷰포트.. 아 머리야... 우선 html부터 보자 뭐 제목~ 두번째 토마토 틸색상 박스 세번째 발리우드 쓰리틀 색상 박스 이렇게 세개로 할 수 있겠지만 큰박스 하나에 다른 박스들은 포지션 absolute로 각 꼭지점에 박아 보기로 생가각했다. 먼저 h1태그로 제목 설정해주고 메인박스 하나 만들고 그안에 세컨드박스 4개를 만든다. 그리고 그 안에 다시 박스를 하나 더 만들고 그 박스안에 h3 와 h5의 부제목들을 달아주자. 이제 css 로 넘어와서 먼저 서체를 times로 잡아주고~ h1과 mainbox가 중..

오늘 챌린지 종목은 box다루기 이다.,~ 이런 box layout 만들기. requirement - use external css 외부 css 파일 임포트 하기가 전부다 자 만들어보자 그냥 보면 배경화면색주고 div로 박스 하나 만들어주고 박스안에 박스 세개를 만들어주자. 그리고 background-color에 #ff6447을 바디에 준다. ( colorzilla로 색은 따오면 된다. ) 똑같이 바디안의 첫번째 박스에 #f5deb3색상을 주자 그리고 그안 박스에 #008080색을 준다. 아직 박스 크기들을 설정은 안해줬으니 될리가 없다. 음 페이지롤러로 사이즈 재보니 대충 첫번째 박스가 240px씩이고 그 안에 세개는 60px씩이다 주자 이런 박스가 만들어졌다~~~ 이제 해야할 것은 화면 중앙에 배치해..

아주 중요한 태그이다. 유저가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button등의 입력 양식 태그를 포함한다. 웹페이지 만들때 꼭 들어간다? 고 봐야 한다. 서버사이드와 연결한다. 페이지에 로드될 정보라던지 유저가 요청한 데이터를 서버에서 가져오고 유저가 입력한 정보를 서버로 전송도 한다. attribute 는 action 과 method가 있는데 action은 URL을 값으로 가지며 입력 데이터 (form data)가 전송될 url을 지정한다. method는 입력데이터의 전달 방식을 지정한다 GET / POST 방식이 있다. GET get 방식은 전송 url에 데이터를 query str..

html에는 list를 표현하기 위해 크게 두가지의 형태의 태그가 있다. ul 과 ol ul 은 unordered list - 순서가 없이 그냥 리스트를 표현해준다 ol 은 order list로 순서를 표기해준다 ol안에 li태그가 5개가 있다면 작성한 순서로 1,2,3,4,5가 li태그 앞에 붙어나온다. type attribute를 사용하여 순서를 나타내는 문자를 지정 가능하다. 또한 start attribute로 리스트의 시작값을 임의로 지정 할 수 있다. reversed attribute를 지정하면 순서를 역으로 표현한다 ul 과 ol은 중첩이 가능하다. 주로 nav메뉴를 만들때 주로 사용된다. 그리고 html에서 표를 만들때 사용하는 table태그가 있는데 이제 잘 안쓴다 주로 div를 활용해서 ..

이제 html5의 기본 구조를 살펴 보자 html은 반드시 로 시작한다 이는 이 문서는 html코드를 포함하고 있다고 브라우저에게 말해주는 역할을 한다. 이후 실질적인 html 코드들이 실행 되는데 크게 head, body로 구분된다. head에는 문서의 title이나 참조, meta태그 등이 들어가는데 이는 문서의 configure라 할 수 있다. meta 태그는 문서의 별도의 정보를 알려주는 역할을 한다. 그리고 body에는 실제 웹에 보여질 content들이 들어간다. 기본 문법은 앞서 설명한 것도 있지만 추가로 더 다뤄 보겠다. html태그는 기본적으로 중첩이 되는데 이때 부자관계가 형성 된다. 위 사진에 바디안에 h1태그와 p태그가 있다 바디는 부모 요소가 되고 h1과 p는 직계 자식요소가 된다..

1. 변수 (variable) 프로그래밍을 공부하면 가장 중요한게 변수이다. variable이란 메모리상에 value를 저장하고 그 저장된 value를 참조하기 위해 사용한다. memory address에 접근하기 위해 사람이 이해 할 수 있는 언어로 지정한 identifier(식별자) javascript에서는 변수를 선언할때 const, let, var를 사용한다. (var는 점점 쓰지 않는 추세이다. 2. value 값을 정의 하기에 앞서 용어 두개를 더 정리하자 변수는 이미 알고 있으니 data type: 프로그래밍 언어에서 사용할 수 있는 값의 type literal : 소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위 여기에 value는 프로그램에 의해 조작될 수 ..