728x90 개발 수업/WEB25 [HTML,CSS] 목록을 만드는 태그, 목록 스타일 더보기 Day38. 230622 [HTML] 목록을 만드는 태그 태그 : 순서 없는 목록 만들기 내용 내용 .. 순서가 필요하지 않은 목록(unorder list)을 만들 때 태그를 사용하고, 내부에 요소(list item)를 포함하여 각 항목을 표시한다. 태그 : 순서 목록 만들기 내용 내용 .. 순서가 필요한 목록(order list)을 만들 때 태크를 사용하고, 내부에 요소(list item)를 포함하여 각 항목을 표시한다. 태그 속성으로 순서 목록의 숫자와 순서 바꾸기 1. type 속성 태그는 순서 목록이기 때문에 각 항목 앞에 1,2,.. 같은 숫자가 기본적으로 붙는데 태그의 type 속성을 이용해 숫자의 종류를 다양하게 조절 할 수 있다. 속성 값 설명 1 숫자(기본값) a 영어 소문자 A .. 2023. 6. 22. 이클립스 jsp파일 오류(The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path) 더보기 Day38. 230622 이클립스 jsp파일 오류 오류 문구> Multiple annotations found at this line: - The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path - The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 해결 방법> 해당 프로젝트에서 마우스 오른쪽 버튼 클릭 후 Build path > Configure Build Path 클릭 Java Build Path > Libraries > Add External JARs.. 클릭 후 톰캣 설치한 경로에서 lib 폴더를.. 2023. 6. 22. [CSS] CSS박스모델 더보기 Day37. 230621 CSS박스모델 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다. 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않는다. border-color:red; border-color:red green; border-color:red green blue border-color:red green blue violet; 2023. 6. 21. [CSS] background 더보기 Day37. 230621 색상과 배경을 위한 스타일 배경 색과 배경이미지 background-color 속성 - 배경 색 지정하기 background-color: background-image 속성 - 웹 요소에 배경 이미지 넣기 background-image: url(파일 경로) body{background-imange: url("a.jpg");} #area{background-imange: url("a2.jpg");} background-repeat 속성 - 배경 이미지 반복 방법 지정 background-repeat : repeat | repeat-x | repeat-y | no-repeat 속성 값 설명 repeat 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복 repe.. 2023. 6. 21. [CSS] 텍스트 관련 스타일 더보기 Day37. 230621 텍스트 관련 스타일 글꼴 관련 스타일 font-family속성 웹 문서에서 사용할 글꼴은 font-family속성으로 지정한다. font-family:[,,] @font-face 속성 - 웹 폰트 사용하기 웹 폰트란? 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식. 사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자가 컴퓨터에 다운로드한 후 표시하기 때문에 웹제작자가 의도한 대로 텍스트를 표시 할 수 있다. 웹 폰트 적용하기 @font-face{ font-family:글꼴 이름; src:url(글꼴 파일 경로) format(파일 유형); } font-size .. 2023. 6. 21. [CSS] 주요 선택자 더보기 Day37. 230621 주요 선택자 선택자? 스타일 속성을 적용하는 요소. 전체 선택자 *{속성:속성 값; 속성:속성 값; ...} 스타일을 모든 요소에 적용할 때 사용한다. 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. 전체선택자로는 *를 사용한다. 또한 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. 태그 선택자 태그{스타일} 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. p{ fomt-size:14px; } -> 모든 p의 문단에 글자크기 12px 스타일이 적용된다. 클래스 선택자 .클래스명{스타일} 특정 부분에만 스타일을 적용할 때 사용하는 것. 태그 대신 클래스 이름을 사용한다. MBTI 16가지 성격 유형 검사 id 선택자 #아이디명{스타일} 웹 문서.. 2023. 6. 21. [CSS] 스타일과 스타일 시트 더보기 Day37. 230621 스타일과 스타일 시트 스타일(style)? 웹 문서에서 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용을 가리킨다. 스타일 형식 p{text-align: center;} 선택자{스타일 속성:속성 값;} 스타일과 스타일 시트 내부 스타일 시트(Internal Stylesheet) 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것. 태그 안에서 정의해야 하고 태그 안에서 작성해야한다. style 태그에 적용한 스타일이 적용됨 외부 스타일 시트(External Stylesheet) 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것. HT.. 2023. 6. 21. [HTML] 표만들기 예제 더보기 Day36. 230620 16개 성격유형 정의 16 Personalities는 Big5를 토대로 카를 융의 이론을 합쳐서 마이어스-브릭스 유형 지표(MBTI)식 명칭을 차용한 성격 유형 검사 테스트는 MBTI 테스트가 아니다. MBTI식 성격 유형을 사용하긴 하지만, 정확한 명칭은 NERIS Type Explorer이다. 성격유형 Extroverted (외향적) Introverted (내향적) 여기서 E인지 I인지가 결정된다 Intuitive (직관) Observant (감각) 여기서 N인지 S인지가 결정된다 Thinking (사고) Feeling (감정) 여기서 T인지 F인지가 결정된다 분석가형 Architect전략가 Logician논리술사 Commander통솔자 Debater변론가 INTJ-A.. 2023. 6. 20. [HTML] 이미지, 절대경로와 상대경로 더보기 Day36. 230620 scr 속성 - 이미지 파일 경로 지정하기 태그 - 이미지 삽입하기 절대경로 최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식 상대경로 현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로 .(or ./) 현재위치 디렉토리 ../ 현재위치의 상위 디렉토리 이미지 프로토콜://IP주소:포트번호/컨택스트패스/~~파일명 위치 : http://localhost:8081/ourPro/ch03/image_p94.html ../image/food1.jpeg http://localhost:8081/ourPro/image/food1.jpeg 속성 border="테두리두께" width="너비%px" height="높이%px" alt="이미지설명.. 2023. 6. 20. [HTML] 링크만들기 더보기 Day36. 230620 링크만들기 태그 텍스트 텍스트 태그 안에서 사용할 수 있는 속성 href 속성 :링크한 문서나 사이트의 주소를 입력한다. target 속성 새 탭에서 링크 열기 _blank : 링크 내용이 새 창이나 새 탭에서 열린다. _self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다. 아이프레임 프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것. a href # - href 태그 안에 기입한 주소 값으로 다른 문서로의 이동, 또는 같은 문서내의 이동을 위해 사용한다. - 창을 이동해야하는 html 요소 ID를 지정하여 이동하거나 주소를 입력하여 이동한다. LINK text,이미지,또 다른 요소 기준위치 http://localhost:8081/ou.. 2023. 6. 20. 이전 1 2 3 다음 728x90
