Summer’s blog

태그(꺽쇠+요소명); 웹콘텐츠(ui요소) 를 저장하는(감싸는) 역할을 한다. 1.텍스트 1-1. 제목 : h1~h6(중요도)>태그 선택자 1-2. 문단 : p(:클래스명을 지정해야한다.)>클래스 선택자 2.이미지 2-1. 일반 이미지 : 2-2. 초상화(증명사진, 인물사진), 예술작품 이미지에 대한 설명 3.비디오 4.오디오 5.목록(리스트) : 제품스팩, 메뉴(a요소,인라인:ul(flex-container)/li(flex-items)) ,입력폼(인라인) ul : 목록태그, li:항목태그 6.하이퍼링크 : 웹 페이지의 계층구조, 정보구조(IA) target="_blank"는 새창으로 띄운다. href 속성값: 상대경로, 절대경로, url경로, 아이디경로(내부경로), 메일경로, 전화경로(모바일) 등을 사용..

Html5에서 새롭게 추가된 입력양식 태그 ※Email : input에 입력한 값이 이메일 형식이 맞는지 체크한다. ※Search : 크롬과 사파리에서만 가능하다. ※url : url입력 형식을 검증하는 창을 만든다 ※tel :각 나라마다 전화번호 입력 표준이 다 다르기 따문에 '-'표시를 넣어주진 않지만 모바일 기기에서 입력할 때 자동으로 숫자패드가 나타난 ※number :숫자를 입력받는다. 텍스트는 아예 입력이 되지 않으며 숫자를 입력하면 입력란 끝에 스핀 컨트롤이 생기면서 화살표를 클릭해 값을 올리거나 내릴 수 있다. ※range :범위에 있는 숫자를 슬라이드로 입력할 수 있는 형태로 만들어준다. ※date :날짜를 입력 받을 수 있다. 날짜를 편리하게 선택 할 수 있도록 달력창이 뜬다. ※colo..

이름 성별 남자 여자 좋아하는 음식 김밥 떡복이 순대 어묵 좋아하는 음식 김밥 떡복이 순대 어묵 교육 내용 프론트엔드 HTML5 CSS3 JavaScript and jQuery Ajax node.js React.js 백엔드 자바 데이터베이스 SQL JSP spring 결과물

※비주얼 스튜디오 코드 한국어로 언어설정 하는법 1 . VS Code 에서 확장 아이콘(뷰바에 있는 맨마지막 사각형4개)을 클릭한다. 2 . 검색 입력폼에 "Korean"을 입력하고 검색한다. 3 . 한국어 확장팩을 설치한다. 4 . F1 키를 누르고 "configure display language"를 입력하고 엔터 키를 누른다. 5 . Local 값을 ko로 설정한뒤 vs code 를 재시작한다. ※비주얼 스튜디오 코드 설정 1 . 뷰바 하단에 있는 톱니바퀴 아이콘을(관리) 클릭한 후 목록에서 색 테마를 클릭한다. 2 . 목록에서 밝기를 선택한다. ※비주얼 스튜디오 코드 글꼴 설정 1 . 뷰바의 하단에 있는 톱니바퀴 아이콘(관리)를 클릭한 후 목록에서 설정을 클릭한다. 2 . Editor : Font..

입력양식 태그는 사용자가 정보를 입력받는 공간을 말한다. 회원가입, 게시글 업로드와 같이 무언가를 입력해서 서버로 전송하거나 제품 주문시 옵션을 선택하고 주소를 입력하고 주문버튼을 누르는 등의 모든 과정들이 입력 양식에 해당한다 입려양식태그를 공부하기 앞서 우선 클리이언트(Clint)와 서버(Server)와의 관계에 대해 이해해야 하며, 서버(제공자)는 웹페에지를 제공해주는 대상이고 클라이언트(고객)는 웹페이지를 받는 대상이다. 클라이언트의 요청(request)은 크게 두가지로 나뉜다. 웹페에지를 요청하는 것과 데이터 처리를 요청하는 것이다. 클라이언트가 서버로 데이터를 전달할 때 사용하는 가장 기본적인 방법은 입력 양식을 사용하여 클라이언트로부터 데이터를 입력받아 보내는 것이다. ※태그 1 . 입력 양..

공간 분할 태그는 블록형(block)와 인라인형(inline) 그리고 인라인-블록형(inline-block) 태그가 있다. 1.블록형(block) -레이아웃을 만들기 위한 요소, 레이아웃 관련 스타일시트가 잘 적용된다.(width, height,padding, margin, text-aline이 적용된다.) -박스와 같이 차곡차곡 쌓아 올려지는 형식, 요소가 위에서 아래로 배치된다. -자동 줄 바꿈 -요소의 너빗값이 100%(기본값)이며, 요소의 높이는 0(기본값)이다. -ex: head, body,div,h1~h6, p,ol,ul,dl,dt,dd,li,a........... 2.인라인형(inline) - 글자를 만들기 위한 요소, 레이아웃 관련 스타일시트가 잘 적용되지 않는다. (width, heigh..

테이블태그는 행과 열에 의해 만들어진 격차가 연속적으로 이어지는 구조이다. table 태그로 전체를 감싼다. 행은 tr 태그로 감싼다. 열(td)은 콘텐츠를 저장하며 td 태그로 감싼다 td 는스타일레이아웃을 제일 잘 먹는다. tr은 스타일 레이아웃을 잘 안먹는다. table은 반반 tr 과 td태그에는 속성을 지정할 수 있다. 실습 1행 1열 1행 2열 1행 3열 2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열2행 1열 2행 2열 2행 3열 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 11 12 13 14 15 21 22 23 24 25 31 32 33 34 35 결과물

[하이퍼텍스트와 속성] - 다른 웹페이지나 웹페이지 내부의 특정 위치로 이동할 때 사용한다. - 링크를 걸고자 하는 부분에 시작점에 끝에 . 즉 라는것은 태그 안쪽에 있는 부분이 링크라는 사실을 브라우저에 알려주는 태그. - a태그를 사용할 때 꼭 필요한 속성은 href 이다. - 새로운 탭이 열리면서 페이지가 열리게 하고 싶을 때 , - href 의 속성값으로 #(더미 링크), 상대경로, 절대경로, URL 경로, 아이디경로,메일 경로, 전화 경로(모바일) 등을 사용할 수 있다. -태그는 외부뿐만 아니라 내부 웹페이지에서도 연결이 가능하다. 이 기능을 북마크(책갈피)라고 하는데 이것을 가능케 하는것이 id속성이다. 또한 top,bottom 값을 이용해서 스크롤바를 사용하지 않고 화면의 최상단,최하단으로 ..

시맨틱 태그 : -태그만 봤을 때 브라우저가 구성된 구조를 알 수 있는 태그. 시멘틱태그 자체적으로는 기능이 없고, 구조를 구분할 때 사용한다. -시맨틱태그를 사용하여 개발한 웹사이트를 시맨틱 웹이라고 하며 웹 브라우저가 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 말한다. -시맨틱은 "의미론적인"이라는 뜻이다. 즉, "태그에 의미를 부여했다". -웹 사이트의 구조에 사용되는 태그를 표준화함으로써 웹 개발자가 임의로 구성했던 웹 사이트의 구조가 더욱 명확해졌다. "인터프리터 (해석기)" 에게 바디 부분에 대한 태그의 종류, 목적, 콘텐츠의 내용을 미리 제공하면 식별이 더 빨라진다 (웹 접근성이 좋다). -인터프리터, 검색엔진, 스크린 리더와 같은 장비등에도 도움을 준다 -휴대용 단말기의 급격한 발전과..

웹 콘텐츠를 저장하는 태그 :-텍스트를 저장할 때 사용하는 태그는 h1~h6 , p 태그이다 -이미지를 저장할 때 사용하는 태그는 img태그이다 이미지 태그() : 문서에 이미지를 포함한다. :-img 태그의 "필수 속성"인 src 속성을 이용하여 이미지를 html 문서에 포함(경로: 상대경로, 절대경로 )시킨다. alt 속성으로 이미지에 대한 설명을 작성한며, 웹 접근성을 향상시키기 위해 웹 표준에서는 사용할 것을 권장한다. -상대경로 : 현재 파일 위치를 기준으리 상대 파일의 위치를 지정 -절대경로 :서버 root부터 표시한 경로 -크기를 조정하고 싶으면 길이는 , -이미지가 깨져서 사진이 안나올경우 대안으로 설명해줄 수 있는 문구 -이미지에 마우스를 올려놨을때 툴 팁이라..