본문 바로가기

분류 전체보기

 (137)
HTML 폼 관련 요소 form : 값을 입력하고 제출하는데 사용되는 요소 > 다른 요소들과는 다르게, 값을 입력받고 정보를 전달하는데 사용되는 요소 > 회원가입, 설문조사, 주문서 등을 만들때 사용된다. - action 속성 : 목적지 주소, 양식 데이터를 해당 URL 로 전송하여 이동한다. - method 속성 : 전송 타입 > GET : 양식 데이터를 url에 첨부하여 전송한다. 데이터가 url 상으로 보이기 때문에 비밀번호 등의 중요정보가 포함되는경우 사용하면 안된다. > POST : 양식 데이터를 요청 본문으로 전송한다. 공개하면 안되는 중요 정보를 처리할때 사용한다. input : form 내에서 입력을 처리하는 태그 - type 속성을 사용하여 형태를 지정한다 - text : 텍스트 값을 입력하는 속성 > minl..
임베디드 요소-video, audio, canvas, iframe video : 비디오 삽입 요소 > video 태그는 태그 내에 값을 넣을수 있으며, 비디오가 정상적으로 나오지 않을경우 태그 내의 값이 나온다. - 보통 브라우저가 영상파일을 지원하지 않을때를 대비해서 사용한다. > src 속성을 통해 비디오 파일 경로를 지정한다. > src 속성이 옵셔널이며, source 태그를 자식 태그로 넣어 사용할 수도 있다. - controls 속성 : video 태그 내 컨트롤 패널을 추가해 줄 수 있다. - autoplay 속성 : 첫 실행 시 자동실행을 시킨다. 사운드플레이 옵션때문에 새로고침시 재생이 멈출수도 있다. - muted 속성 : 음소거, 설정시 새로고침을 하더라도 autoplay 속성이 실행된다. - loop 속성 : 속성 추가시 영상이 끝난 뒤 처음부터 반..
임베디드 요소 - img img : 이미지를 담는 태그 > 안쪽에 내용이 없는 닫힌 태그 - src 속성 : source, 띄울 이미지의 경로를 표시하는 속성, 필수적으로 들어가야 한다. - alt 속성 : alternative, 대체 텍스트로, 이미지가 출력되지 않을 경우 이미지의 설명을 텍스트로 나타내게 만든다. - width & height : 이미지의 가로, 세로 크기를 지정해줄 수 있다. > width속성 또는 height 속성 중 하나만 사용한다면, 이미지의 비율에 맞춰 사용하지 않은 속성도 자동으로 정해진다. > 두 속성 모두 사용한다면, 비율을 무시하고 이미지 크기를 조정한다. 반응형 이미지 - srcset 속성 : 이미지 소스를 다수 올릴수 있는 속성 > 반응형 이미지를 설정하기 위해 사용한다. > 이미지의 UR..
목록과 표 - ul&ol, dl, table, caption 1. ul , ol , li - ul : Unordered List, 순서가 없는 리스트 - ol : Ordered List, 순서가 있는 리스트 > type 속성을 통해 목록의 순서표시를 다르게 할 수 있다. ex) type = "1" => 1,2,3... type="a" = a,b,c... > start 속성을 사용하여 처음 시작하는 숫자를 정할 수 있다 ex) start = "5" => 5,6,7... > reversed 속성을 사용해 목록의 순서를 반대로 만들수 있다. ex) => 1,2,3,4 => 4,3,2,1... - li : List의 구성요소, ul태그와 ol 태그 내에서 사용한다. > li 태그 내에서 또 다른 ul이나 ol 태그를 사용할 수 있다. 리스트 출력 첫번째 리스트 두번째 리..
div, span 그리고 시멘틱 웹 div 태그 : 특정 구역을 묶는 태그 > 순수 컨테이너로서 아무것도 표현하지 않는다. = 의미가 없다 > block 속성 태그이기 때문에, 늘어날 수 있는 너비까지 끝까지 차지한다. span 태그 > div 태그와 비슷하지만 inline 속성을 갖고 있다. 시멘틱 웹 : Sementic Web, 각 부분에 메타데이터를 부여하여 웹 페이지에 의미와 관련성을 부여하는 웹 설계 방식 > 스크린리더로 페이지 탐색 시 의미론적 마크업을 푯말로 사용할 수 있다. > 개발자에게 태그 안에 채워질 데이터 유형을 제안할 수 있다. > 검색엔진과의 상호작용이 수월해진다. > 수많은 div 속에서 찾기보단, 의미가 부여된 시멘틱태그를 찾는 것이 편하다. > 시멘틱 웹에 영향받은 HTML 레이아웃 https://www.w3..
HTML 태그 : 텍스트 위 글은 html 태그 중, 텍스트 관련 태그를 정리한 글입니다.  1. 태그 - 태그란, 제목을 나타내는 태그로, header를 의미합니다.- h 뒤에 숫자를 붙여 크기를 조정할 수 있으며, 1이 제일 크고, 숫자가 커질수록 작아집니다.- 해당 태그는 block 속성이 default로 되어있습니다. - 코드 예시h1h2h3h4h5h6 위의 코드는 아래의 결과화면을 갖습니다.  2. 태그 - 태그는 하나의 문단을 나타내는 태그로, paragraph를 의미합니다.- p태그 자체가 하나의 문단을 의미 하기 때문에 block 속성을 기본으로 가지고 있습니다. - 코드 예시이것은 p 태그입니다. block 속성을 확인하기 위해서 녹색 테두리를 추가해보았습니다.위의 코드는 아래의 결과화면을 갖습니다.  3..
6개월 간 학습 계획 우선적으로 제로베이스 프론트엔드 스쿨에서 제공하는 18주 커리큘럼을 잘 따라가는 것을 목적으로 하고 있습니다. 학습을 하면서 여유가 나면, 도중에 배운것들을 바탕으로 토이프로젝트를 진행해보고는 싶지만 일단 희망사항으로 두고 있습니다. 1주차, 2주차에는 HTML/CSS, GIT 저장소 강의를 들으면서 부족한 부분이나 모르고있던 부분이 있는지 점검하고 확인하는 것을 목적으로 하고 있습니다. 3주차에는 반응형 디자인과 Sass등을 배우고, 스스로 익숙하게 사용할 수 있도록 복습해볼 예정입니다. 4주차에는 페이지 구현을 따라하면서 이전에 만들었던 페이지와 어떻게 다른지, 코드를 비교하고 어떻게 해야 깔끔한 코드가 될지 고민해볼 생각입니다. 5,6,7 주에는 자바스크립트 실전으로 열심히 노력해보겠습니다. 9,1..
프론트엔드 개발자가 되기로 결심한 이유 프론트엔드 개발자가 되기로 결심한 계기는 정말 사소했습니다. SSAFY에서 팀 프로젝트를 진행해야했는데 각자 프론트엔드와 백엔드의 역할을 정해야 했어요. SSAFY 내에서는 대부분 백엔드를 가려고하고 프론트엔드는 기피하는 분야였습니다. 그 당시 저는 프론트엔드도 백엔드도 둘 다 경험이 필요하다고 생각했고, 당시 프로젝트 팀에서 프론트엔드가 부족했기 때문에 프론트엔드를 정했었는데 위에서 말했던것처럼 프론트엔드가 부족한 상황이 겹쳐서 다음 프로젝트도 프론트엔드로 하게 되었고, 그 다음프로젝트도 프론트엔드를 하게 되면서 그대로 프론트엔드로 가게 되었습니다. 그런데 막상 해보니까 재밌더라고요. 이전에 대학교에서 배웠던 안드로이드 스튜디오에서 XML 로 화면구현하는 것과 유사하기도 했고, 익숙한 느낌이 들었습니다..

티스토리툴바