영프로 개발

1. 정렬하기 [HTML] div 태그: 레이아웃을 나누기 위해 사용하는 태그 img 태그: 이미지를 표시하는 태그 (src 로 이미지 지정) a 태그: 링크를 연결하는 태그 (href 로 링크 지정) p 태그: 문단을 표시하는 태그 h 태그: 제목을 표시하는 태그 input 태그: 사용자로부터 입력을 받는 태그 [CSS] width: 가로 길이 지정 height: 세로 길이 지정 flex: 정렬을 위해 사용하는 display 의 값 (display: flex) justify-content: 메인 축 중앙 정렬 (초기에는 가로 축) align-items: 교차 축 중앙 정렬 (초기에는 세로 축) color: 글자 색 지정 background-color: 배경 색 지정 margin: 테두리 밖 여백 pad..

Float Float은 특정한 요소를 왼족 혹은 오른쪽에 정렬하고자 할때 쓰는 속성입니다. 특이하게 다음 요소가 줄바꿈이 되지 않는다는 특징이 있습니다. Flex Flex를 사용하면 원래 세로로 있던 요소들을 가로로 배치할 수도 있고 여러요소들을 한번에 중앙에 배치할 수도 있습니다. flex는 자기 자신에게 적용하는 것이 아니라, 정렬하고자 하는 요소들을 감싸는 부모요소에 적용해야 합니다 Grid Grid는 말그대로 격자형태로 요소들을 배치할 수 있게 도와줍니다! 한 요소가 몇개의 칸을 차지랄지 임의로 선택할수 있는데요 잘 활용한다면 다양한 모양의 요소 배치를 손쉽게 할 수 있습니다.

: 요소들을 구분하기 위한 태그 : 표 요소, Row와 Column의 집합 : pargraph (문단) 을 표현하기 위한 태그 : 제목을 표현하기 위한 태그 , : 강조하기 위한 태그 : Table Row ( 행 ) : Table Data ( 열 ) Huey Dewey Louie 위의 html은 drone이라는 그룹에 속해있습니다. 요소를 어떤 요소로 묶어주는걸 Wrapping 이라고 합니다.

태그안에 있는 정보 meta : HTML문서의 제작자, 내용, 키워드 같은 여러 정보를 검섹엔진이나 브라우저에 제공 title : HTML 문서의 제목을 정의 link : 외부 문서를 가져와 연결할 때 사용 script : JS파일을 가져오는 경우, JS를 직접 HTML문서 안에서 작성하는 경우 사용 style : CSS를 HTML 문서 안에서 작성하는 경우에 사용 상대경로와 절대경로 상대경로 ../ ( 상위 폴더 ) ./ (주변) 절대경로 http / 브라우저 스타일 초기화 reset-css CDN을 이용하여 태그안에 복사하여 사용한다. 각각의 브라우저마다 스타일이 조금 다를 수 있기 때문에 웬만하면 초기화 한 후 코드 작성하는것이 좋다. Emmet Emmet은 CSS 선택자를 활용해 사용하는 기능이다.

HTML/CSS/JS HTML 페이지의 제목, 문단, 표. 이미지, 동영상 등 웹의 구조를 담당. CSS 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. JS 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 웹앱의 동작 원리 1. Request 2. Response ( HTML ) 3. 추가 Request 4. 추가 Response ( CSS, JS, JPG, ... ) 크로스 브라우징 - 여러 브라우저에서, 동일한 사용자 경험을 줄 수 있도록 제작하는 기술 웹 이미지 Raster - .jpeg .gif .png 정교하고 다양한 색상을 자연스럽게 표현 Vector - .svg 정교한 이미지를 표현하기 어려움