본문 바로가기

전체 글

 (93)
[HTML] 목록 표시하기 : 순서 있는 목록 (ordered list) : 순서 없는 목록 (unordered list) li 태그 (항목 태그)목록에 들어가는 항목 하나 하나 표현 시 사용감싸는 태그 (ul / ol 태그)에 따라 웹 브라우저에 나타나는 기호가 달라짐≫ , , 는 모두 블록 레벨 요소를 만드는 태그 !  귀여운 동물 목록 강아지 고양이 두더지 햄스터 프로그래밍 공부 순서 HTML CSS JAVASCRIPT NODEJS , , 는 모두 블록 태그이므로 안에 인라인 태그 추가 가능실행 결과HTMLCSSJAVASCRIPTNODEJS
[HTML] 링크 만들기 링크현재 문서에서 다른 문서로 이동할 수 있는 수단a 태그 ≫ href 속성을 통해 다른 페이지, 전화번호, 이메일 주소, 그 외 다른 url로 연결할 수 있는 링크인라인 요소콘텐츠는 주로 링크의 목적지 나타냄네이버 target 속성새로운 문서를 열 때, 현재 탭에서 열지 새로운 탭에서 열지 결정"_self" : 현재 탭에서"_blank" : 새로운 탭에서기본값은 self ! ≫ 지정하지 않으면 현재 탭에서 열림 전화 걸기 / 메일 쓰기웹문서 주소 뿐 아니라 전화번호, 메일 주소 등을 href에 지정tel / mailto 문자열 지정010-1234-5678 전화걸기emailaddress@naver.com 메일 전송  네이버 구글 ..
[HTML] 컨테이너와 전역 속성 컨테이너 태그콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그콘텐츠 내용 구분 / 공통적인 스타일 적용 등에 사용 : 블록 레벨 컨테이너 : 인라인 컨테이너  일단 문서를 만들자 공부 다짐하기 공부를 열심히 하기로 했다! 운동 열심히 하기 건강을 위해 운동을 열심히 하자! 콘텐츠 내용이 크게 2종류로 구분됨 → 컨테이너 태그를 통해 분류모두 블록 레벨로 작성되어 있으므로 (, ) 태그 사용브라우저에는 변동사항이 없지만 개발자 도구에서 표시됨커서를 갖다 대면 나누어진 블록 확인 가능 태그 사용콘텐츠에 사용하면 그 글씨만 따로 표시됨 (개발..
[HTML] 이미지 표시하기 img 태그이미지를 표시할 때 사용단일 태그콘텐츠를 적지 않고 표시할 이미지에 대한 정보를 속성으로 지정 src 속성표시할 이미지의 위치 정보와 파일명을 입력받는 속성이미지의 url을 입력받음서버에 위치한 이미지 파일 / 내 컴퓨터에 저장된 이미지 파일 ≫ 모두 가능url 작성 방법내 컴퓨터에 있는 이미지 파일같은 파일 내에 images 파일 생성 후 사진 추가"images/이미지파일이름"서버에 위치한 이미지 파일서버에서 원하는 이미지 파일의 주소 복사"복사된이미지파일주소" alt 속성alternative의 약자 ≫ 대체 텍스트 역할이미지가 로딩되기 전 / 이미지 로딩에 실패한 경우 ≫ 이미지 대신 대체 텍스트가 표시됨올바른 url 지정 후 alt 태그 지정하면 대체 텍스트는 나타나지 않음 이미지 크기 ..
[HTML] 블록 태그와 인라인 태그 태그의 구분블록 레벨 요소를 만드는 "블록 태그"자신이 속한 영역의 너비를 모두 차지하여 블록 형성인라인 요소를 만드는 "인라인 태그"자신에게 필요한 만큼의 공간만 차지 블록 태그, 등개발자 도구에서 커서 가져다 대면 블록 확인 가능위,아래, 양 옆 공간으로 블록이 있음 인라인 태그string  태그 ≫ 콘텐츠를 굵게 표시em 태그 ≫ 콘텐츠를 기울여 이탤릭체로 표시mark 태그 ≫ 콘텐츠에 형광펜 표시  제목을 표시하는 큰 텍스트! 문단을 나타내는 작은(?) 텍스트 굵은 글씨 기울여진 글씨 형광펜 글씨 , 태그는 블록 태그로 블록 영역이 있음 (위, 아래, 양 옆 공간 차지) 태그 속의 , , 태그는 태그의 블록을 방해하지 않으면서 자신만의 ..
[HTML] 코드 기초 문법 / 텍스트 태그 태그HTML 코드에서 정보(콘텐츠)를 정의하는 형식 와 를 사용하여 콘텐츠의 시작과 끝 표시예) 콘텐츠단일 태그시작과 끝을 구분할 필요 없는 태그예) or  속성태그의 부가적인 기능 정의 (선택사항)- 시작 태그 내부에 정의 !- 단일 태그에는 단일 태그 내부에 정의- 속성의 개수 제한 x예) 내용- 태그명과 속성 정의는 공백으로 구분되어야 함 주석  텍스트 태그문단(paragraph) ≫ p 태그문단 요소를 나타내는 태그. 가장 많이 사용되는 텍스트 태그하나의 p 태그는 하나의 문단을 표현문단과 문단 사이에는 공백이 있음! 제목(headline) ≫ h 태그제목 요소를 나타내는 태그숫자와 함께 사용 → h1~h6h1일 때 가장 크고 h6일 때 가장 작음 수평선 ≫ hr 태그수평선을 표시하는 태그주제 ..
[HTML] 문서 기본 구조 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그문서 유형 : 웹 브라우저에게 "이 문서는 ~~니까 잘 처리해줘" ~문서가 시작되고 끝나는 것을 나타내는 태그모든 내용은 이 안에 작성됨태그 내부에 다양한 태그들을 포함 → 들여쓰기로 구분 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아야 할 모든 정보를 포함예) / css 링크 / 다른 메타데이터(작성자, 중요한 키워드 등)문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그문자 인코딩 ≫ 한글을 표시하기 위해 문자 세트를 지정하는 작업영문/한글 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋음~문서의 제목을 나타냄콘텐츠는 브라우저 탭에 표시됨브라우저 사이트를 북마크할 때 의 내용물을 추천하는 북마크 이름으로 사용하기..
WEB Server와 WAS WEB Server웹 브라우저 클라이언트로부터 HTTP 요청을 받아들이고 HTML 문서와 같은 웹 페이지를 반환정적 컨텐츠 제공 !단순 HTML 문서, CSS, JavaScript, 이미지, 파일 등 즉시 응답 가능한 컨텐츠 제공대표적 웹 서버 : Apache1. 정적 컨텐츠 제공2. 동적 컨텐츠를 요청 받으면 WAS에게 해당 내용을 넘겨주고, WAS에서 처리한 결과를 클라이언트에게 전달  WAS인터넷 상에서 HTTP 프로토콜을 통해 사용자 컴퓨터나 장치에 애플리케이션을 수행해주는 미들웨어동적 컨텐츠 제공 !주로 데이터베이스 서버와 같이 수행되어 DB 조회나 비즈니스 로직을 처리JSP, Servlet 구동환경을 제공대표적 WAS : TomcatServlet: 자바로 작성된 서버 측 프로그램클라이언트가 서..

티스토리툴바