Front-end/HTML, CSS 19

CSS 기초

CSS로 HTML의 element를 스타일링 할 수 있다. 예를 들어 .box{ width: 100px; height: 100px; border: 1px solid black; } ↓ .box -> class=“box” 속성을 가진 element를 스타일 한다고 명시 width(가로 길이), height(세로 길이), border(테두리) 등을 지정해 element의 모양 및 위치를 바꿈 *우선 가장 쉬운 방법은 head 섹션에서 *코드가 지저분해 지는 것을 방지해 head섹션의 링크 태그에서 “style.css”를 불러온 후 style.css파일로 넘어가 따로 스타일을 입력하는 것 도 가능하다.(HTML기초 참조) #class와 id html태그를 분류해서 한번에 css스타일링을 적용 할 수 있다. -..

Front-end/HTML, CSS 2021.02.14

웹 개발 가이드라인

1. 프론트 엔드(UI/UX), client side 단순히 말해 웹 사이트에서 눈에 보이는 것 HTML, CSS, Java Script 등으로 구성됨 HTML: 페이지의 구성에 사용하는 단순한 언어 CSS: 페이지 스타일링(색상, 넓이, 위치 조정 등) Java Script(JS): 유저와 페이지의 상호작용을 정의해주는 언어 2. 백 엔드, server side 웹 사이트에서 눈에 보이지 않는 것을 담당 이용자 -> 서버 -> DB 서버가 유저의 요청을 받아서 DB에 데이터 요청 이용자 프론트 엔드 -> 백 엔드, 프레임워크 순으로 공부

Front-end/HTML, CSS 2021.02.14

템플릿으로 웹 만들기

1. 구글에 검색해 적당한 html템플릿을 html파일로 받는다.(free html template) Download 3157 Free Website Templates - CSS & HTML | Free CSS www.free-css.com *파일에 read me나 licence등의 문서가 있다면 꼭 확인해준다. 2. 압축 해제 후 html파일을 VScode로 연다. 3. 로 내용을 찾아 수정, 로 저장해 적용한다. 4. 외부 서버 서비스를 이용해 사이트를 활성화 시킨다. (https://~~~.com) Netlify (깃 허브로 가입) Netlify: Develop & deploy the best web experiences in record time A powerful serverless platfo..

Front-end/HTML, CSS 2021.02.14

HTML 기초

개발자 도구( or 웹에서 우클릭 -> 검사): 웹사이트 코드 구성을 볼 수 있음 웹에서 영역 선택해 구성요소를 보고 수정 할 수 있음 우선 html의 시작은 html 태그로 열고 닫아야 한다. html은 head와 body섹션으로 나뉜다. #head 섹션: html의 문서 정보를 명시해준다. (이하 기능들은 head섹션 안에 입력) -문서의 타이틀: 탭에 뜨는 이름 표시 나의 사이트 -링크 태그(head 섹션)*: 다른 곳에 저장된 파일들을 html 문서에 불러옴 href는 파일의 위치, rel과 type은 파일의 성질을 설명 -메타 태그: 웹사이트의 더 자세한 정보를 태그/ 웹이 외부에 공유될 때 뜨는 정보 이 외에도 다양한 입력 가능 메타 태그 참조 -> https://webclub.tistory...

Front-end/HTML, CSS 2021.02.14