Front-End/HTML + CSS15 [CSS] CSS의 시작(CSS의 정의부터 앵커 가상 클래스 선택자까지) CSS(Cascading Style Sheets) HTML 요소들이 각종 미디어에서 어떻게 보일지를 정의하는데 사용되는 스타일 시트 언어입니다. HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 지정하는데 어려움이 있습니다. 따라서 매우 많은 시간이 걸리며 완성한 후에도 스타일의 변경 및 유지보수가 매우 힘들다. 이 문제를 해결하기 위해 W3C에서 만든 스타일 시트 언어가 CSS입니다. CSS문법 * 3. 외부 스타일 : 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다. 외부에 작성된 스타일 시트 파일은 css확장명을 사용하여 저장합니다. 스타일을 적용할 페이지 CSS 선택자 1. 전체 선택자 ( * ) 스타일을 모두 요소에 적용할 때 사용한다. 전체 선택자는 한.. 2020. 12. 5. [HTML] HTML 마무리를 지어보자. a 태그, iframe, div, span, form, type 속성, 하이퍼 링크 : 하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다. 링크에 사용될 문자 또는 이미지 네이버 https 2020. 11. 21. [HTML] HTML 이미지와 테이블 이미지 비트맵과 벡터이미지 비트맵은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터 이미지라고도 부른다. 픽셀 단위로 화면에 렌더링한다. 그림판, 포토샵 등 툴로 편집할 수 있다. 벡터이미지는 수학적 정보의 형태들이 만들어내는 결과물이다. 이미지가 가지고 있는 점, 선, 면의 위치, 색상 등의 정보를 가지고 있으며 그를 화면에 렌더링합니다. 확대 및 축소를 해도 이미지가 깨지지 않습니다. 일러스트 같은 툴로 편집할 수 있다. jpg(jpeg) 압축율이 훌륭하여 사진이나 예술분야에서 많이 사용된다. 손실 압축(알고리즘)을 사용한다 파일명 또는 ./파일명 - ./파일명 ./하위폴더명/파일명 또는 하위폴더명/파일명 - 이미지가 상위폴더에 있는 경우 -> ../파일명 - 이미지가 상위폴더에 다른폴더 하위에 있는.. 2020. 11. 21. [HTML] HTML의 시작. 근데 이거 맞아? 짧고 굵게 배우자. 기본 준비는 끝났다. 시작해야지? 어떻게 이 블로그를 풀어나갈까 많은 고민을 했다. 이미 너무나 많은 수준 높은 무료 강의들이 나와있고, 뛰어난 수준을 가진 개발자들이 블로그를 운영하고 있는 지금 이 세상에 나의 블로그를 들어와서 보고 도움을 받는 사람이 있을까? 정답은 없다! 라고 생각했다. 물론 지금은 없겠지만 1년 후, 2년 후에 고급 기술을 기재했을 때 누군가 들어와서 보다가 이 작자가 처음엔 어떻게 글 써놨지? 하고 보러오는 사람이 있지 않을까 라는 생각으로 시작하려한다. 물론 정리만 따 - 다 -닥! 그리고 후 - 다 - 닥 문단 태그 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하고 태그를 이용하여 문단을 표현한다. 블록(block)태그라고 한다. 블록(block)태그는 아무리 작은 .. 2020. 11. 1. 코딩 개발 도구 visual studio code(VS CODE) 우리는 코딩 개발을 하기 시작 전 어떠한 준비를 해야 할까? 물론 다양한 코딩 개발도구가 있겠지만, Microsoft 사에서 만든 visual studio code를 사용합니다. 물론 HTML 같은 경우는 메모장, textedit 등 어떠한 문서 형식으로도 만들 수 있지만, 있어 보이고 작성을 편하게 해 주는데 무료(?)라면 감사합니다! 하고 써야죠 :) VS CODE는 검색 후 사이트에 접속하여 Mac, Window, Linux 모두 무료로 제공하고 있습니다. 환경에 맞춰서 다운로드하여 사용하시면 됩니다. VS CODE의 개인적인 최대 장점은 바로 확장 프로그램입니다. 그중에서 많이 사용되고, 사용하고 있는 몇 가지의 프로그램들을 적어볼까 합니다. 익스텐션 클릭- korean 검색 - 설치 : vs c.. 2020. 11. 1. Front-End 의 첫 걸음 프론트 엔드 개발자는 무엇을 공부해야할까 ? " 프론트 엔드 " HTML5(HyperText Markup Language) : 웹 사이트의 구조를 담당. 문서에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 의미를 부여하는 언어. CSS(Cascading Style Sheets) : 웹사이트의 실제 표현되는 방법(색상, 크기, 폰트, 레이아웃 등) 지정해서 HTML 문서를 시각적으로 만들어주는 언어. JavaScript : 컨텐츠 내용을 바꾸고 움직이는 페이지 등을 만들기 위해 동적으로 프로그래밍 하는 언어. (차이점 : 문법도 따로있고 새로운걸 만들어낼 수 있음.) 공부 중요도가 가장 높다. SNS - SPA(Single Page Application) ECMA6 : 자바스크립트 표준화 JQuery.. 2020. 10. 30. 이전 1 2 다음
