[TIL] html h, div, form, input 태그 / java 다이아몬드 별 찍기

다이아몬드 별 찍기 (java)

import java.io.BufferedReader;
import java.io.InputStreamReader;

public class DiamondStar {
    public static void main(String[] args) throws Exception {
        String blank = " ";
        String star = "*";

        // 7*7 matrix에 다이아몬드 별 찍기
        for(int i=0; i<7; i++){
            // 공백은 matrix 너비(7)의 절반 개수(7/2=3)부터 시작해서 하나씩 줄어간다.
            // 별은 1개부터 시작해서 양쪽으로 1개씩 늘어간다.
            // 별 개수 == matrix 너비(7)에서 양쪽 공백을 제거한 개수만큼 출력
            int blankNum = Math.abs(7/2 - i);
            System.out.println(blank.repeat(blankNum) + star.repeat(7 - 2 * blankNum));
        }

        // matrix의 너비를 입력받아 다이아몬드 별 찍기
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        System.out.print("숫자를 입력하세요. : ");
        int input = Integer.parseInt(br.readLine());

        for(int i=0; i<input; i++){
            // 공백은 matrix 너비의 절반 개수부터 시작해서 하나씩 줄어간다.
            // 별은 1개부터 시작해서 양쪽으로 1개씩 늘어간다.
            // 별 개수 == matrix 너비에서 양쪽 공백(2*공백 개수)을 제거한 개수
            int blankNum = Math.abs(input/2 - i);
            System.out.println(blank.repeat(blankNum) + star.repeat(input - 2*blankNum));
        }
    }
}

• 홈페이지
  • 첫 화면 파일은 index.html
• 웹사이트
• 정적 페이지
  • html, css, js, 클라이언트에서 실행
  • 소스가 공개됨
• 동적 페이지
  • jsp, php, asp, java, c#
  • cgi (common gateway interface) 구현
    • 게시판, 회원가입, 상품구매와 같은 동적 페이지

HTML

index.html

웹 브라우저는 주소에 명시적으로 파일을 요청하지 않으면 가장 먼저 index.html을 요청한다.

구성요소

• tag
  • <태그명>
• 속성
• 문법
  • html 문법은 태그와 속성으로 구성된다.
• 주석
  • <!— —>
  • vscode에서 cmd + / 단축키로 주석처리

HEAD

• title

  • 문서 제목은 중복되면 안 됨.
  • 검색 엔진에서 title태그로 html 문서를 찾음.
  • 중복되는 title의 문서가 발견되면 해당 웹 사이트의 신뢰성이 떨어진다고 판단하여 노출도에 안 좋은 영향 → SEO(Search Engine Optimizing)

• 메타 데이터

  <meta name="viewport” content="width=device-width">

  viewport : 웹 페이지가 접속한 기기에서 보이는 실제 영역

  width=device-width : 문서의 너비를 기기의 너비로 설정한다. → 어떤 기기로 접속하더라도 뷰포트는 접속한 기기의 해상도를 올바르게 인식

블록 요소, 인라인 요소

• 블럭 요소
  • 항상 줄 바꿈되는 태그로 작성한 코드
  • h 태그, p 태그

    • ~

      안의 내용을 문단으로 인식. 문단 끝나고 줄바꿈
  • br : 줄 바꿈. break
• 인라인 요소
  • 공간이 부족할 때만 줄 바꿈되는 태그로 작성한 코드
  • a 태그, span 태그

h 태그

제목, 주제 나타내는 텍스트를 표현할 때 사용

검색 엔진에서 키워드로 인식한다.

h1부터 h6까지 순차적으로 탐색, 중간에 숫자를 건너뛰면 이후 태그를 검색하지 않음 → seo를 위해서는 순차적으로 사용해야 한다.

CDN 방식

Content Delivery Network

서버에서 직접 지원하지 않고 사이트를 통한 연결

지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술

미국에 있는 사용자가 한국에 호스팅 된 웹 사이트에 접근하는 경우 미국에 위치한 PoP 서버(캐시 서버)에서 웹사이트 콘텐츠를 사용자에게 전송하는 방식

div 태그

블럭 요소와 인라인 요소를 그룹으로 묶을 때 사용함

span 태그

인라인 요소를 그룹으로 묶을 때 사용함

<p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>

ul 태그

비순서 목록 생성 시, 사용

<ul>
    <li>사과</li>
    <li>바나나</li>
    <li><a href="https://www.naver.com/" target="_blank" title="link description">NAVER</a></li>
</ul>

ol 태그

<ol>
    <li>아침</li>
    <li>점심</li>
    <li>저녁</li>
</ol>

a 태그

<a href="대상경로" target="링크 연결 방식, _blank(새창에서열기)" title="검색 엔진을 위한 설명">글씨 내용</a>

<a href="https://www.naver.com/" target="_blank" title="link description">NAVER</a>

_parent는 프레임이 사라져서 사용하지 않는다. 프레임 대신 시맨틱 태그 사용

img 태그

<img src="이미지 경로" alt="시각 장애인들을 위한 이미지 설명">

hover

링크를 적적히 디자인 하려면 LVHA순서

:linkㅡ :visited ㅡ :hover ㅡ :active

를 따라서

:hover 규칙을 :link와 :visited뒤, :active 앞에 배치해야 한다.

semantic

html4 → html5 차이점 : semantic

spring : 타일즈

springboot : 타임리프

Form 태그

• action 속성
• method 속성

<form action="서버 url" method="get || post"> </form>

action 속성

사용자와 상호작용으로 입력받은 값들을 전송할 서버의 url 주소

method 속성

입력받은 값을 서버에 전송할 때 송신 방식

get 혹은 post(보안이 요구될 때)

Input 태그

• type 속성
• name 속성
• value 속성

입력받는 요소를 생성할 때 사용 (ex) 로그인 시, 아이디와 비밀번호

<input type="종류" name="이름" value="초깃값">

type 속성

속성값	설명
text	한 줄 텍스트 입력
password	비밀번호 입력
number	숫자만 입력
checkbox
radio
button
submit

<input type="button">
<input type="submit" name="submit" id="">

label 태그

form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용

fieldset, legend 태그

fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생김

<form action="#">
    <fieldset>
        <legend>그룹 이름</legend>
        <label for="id">id</label>
        <input type="text" name="id" id="">
    </fieldset>
</form>

textarea 태그

여러 줄의 입력을 받을 때 사용

<textarea name="contents" id="" cols="30" rows="10"></textarea>

select, option, optgroup 태그

select : 콤보박스

optgroup - option

<select name="city" id="" size="2">
    <optgroup label="서울시">
        <option value="강북구">강북구</option>
        <option value="강남구">강남구</option>
        <option value="서초구">서초구</option>
    </optgroup>
</select>

<select name="city" id="" multiple>

<option value="강북구" selected>강북구</option>

button 태그

<button type="submit">
    등록하기 버튼<img src="url">
</button>

button 태그 VS input type=’button’

button 태그는 시작, 종료 태그가 있어서 내부에 이미지와 같은 컨텐츠 작성 가능

---

Refs

CDN

https://library.gabia.com/contents/infrahosting/8985/