전체 글90 [CSS] 가상클래스, 컬러, 텍스트 속성, 배경 순서에 따른 가상 클래스 CSS 스타일을 주기 위해 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택할 수 있습니다. 김사과 오렌지 이메론 li:first-child : li 요소 중에서 첫번째 해당하는 요소에 CSS를 적용합니다. ex) li:first-child { color : red; } li:last-child : li 요소 중에서 마지막에 해당하는 요소에 CSS를 적용합니다. li:nth-child(n) : li 요소 중에서 n번째 요소에 CSS를 적용합니다. ex) li:nth-child(2) { color: orange; } li:nth-child(odd) : li 요소 중에서 홀수번째 요소에 CSS를 적용합니다. li:nth-child(even) : li 요소 중.. 2020. 12. 5. [CSS] CSS의 시작(CSS의 정의부터 앵커 가상 클래스 선택자까지) CSS(Cascading Style Sheets) HTML 요소들이 각종 미디어에서 어떻게 보일지를 정의하는데 사용되는 스타일 시트 언어입니다. HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 지정하는데 어려움이 있습니다. 따라서 매우 많은 시간이 걸리며 완성한 후에도 스타일의 변경 및 유지보수가 매우 힘들다. 이 문제를 해결하기 위해 W3C에서 만든 스타일 시트 언어가 CSS입니다. CSS문법 * 3. 외부 스타일 : 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다. 외부에 작성된 스타일 시트 파일은 css확장명을 사용하여 저장합니다. 스타일을 적용할 페이지 CSS 선택자 1. 전체 선택자 ( * ) 스타일을 모두 요소에 적용할 때 사용한다. 전체 선택자는 한.. 2020. 12. 5. [부트스트랩] 부트스트랩 (Bootstrap) 트위터(Twitter)에서 만든 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 프레임워크입니다. * 프레임워크 재사용이 가능한 요소들의 집합이며. 정해진 구조와 틀 안에서 확장이 가능한 기반 코드로 이루어짐을 말합니다. 부트스트랩의 시작 구글 -> bootstrap cdn 글 쓰는 textarea에서 부트스트랩을 가져다쓰면, 이미지 넣기, 굵게, 기울기 등등의 기능등이 생성된다. 부트스트랩에서는 보통 div로 감싼다. class = "col-sm-4" * 3 부트스트랩에서 col 은 field를 의미한다 그 뒤 단어는 [형태나 크기]를 말하고 그 뒤 숫자는 [비율]에 해당한다. sm은 태블릿버전 가로 768보다 사이즈가 내려가면 글이 내려간다. 뒤 숫자는 합이 1.. 2020. 11. 29. Git, GitHub 사용하기 Git 이란 ? 버전 관리 시스템의 한 종류입니다. 버전 관리 : 여러 파일을 하나의 버전으로 묶어 관리하는 것을 말합니다. 버전 관리 시스템의 종류 1. 클라이언트 - 서버 모델 하나의 중앙 서버로 여러 클라이언트들이 각자 필요한 데이터만 가져와서 작업을 하고, 다시 중앙 서버로 보내어 통합하는 방식을 말합니다.(CVS, Subversion(SVN) ) 2. 분산 모델 하나의 중앙 서버가 존재하지만 여러 클라이언트들은 각자의 컴퓨터 저장소에 전체 사본을 가지고 작업하는 방식을 말합니다. (Git) Git의 장점 동시에 작업하는 사람들과 소스코드를 주고받을 필요가 없습니다. 같은 파일을 여러명이 동시에 병렬 개발이 가능합니다. 변동 과정을 체계적으로 관리할 수 있고, 언제든지 지난 시점의 버전으로 되돌릴.. 2020. 11. 28. [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 ··· 7 8 9 10 다음
