반응형

# 기획, 기획자

  • 무엇인가를 만들기 전 미리 상상하고, 계획하고, 구체화하는 과정이 필요하다. 이러한 일련의 과정은 여러 사람이 같이 협업할 경우엔 더욱 필요한다. 이러한 설계 과정을 기획이라고 하며, 이러한 업무를 담당하는 사람을 기획자라고 한다.

 

# 코딩과 HTML

왼쪽(결과) : Application, App, Program, Webpage, Website / 오른쪽 : Code, Source, Language 

  • 결과를 부르는 여러 표현 Application, App, Program, Webpage, Website
  • 코딩의 핵심 : 원인인 코드를 통해서 결과를 만든다는 것이다.

 

# HTML

  • 웹 페이지를 만든는 코드

## HTML은 두 가지 측면에서 좋다. 

1. 쉽다. ( 배우기 쉽고, 사용하기 쉽다. )

2. 중요하다. ( 정보가 담기는 거대한 그릇 )

## 실습

  • 메인 페이지 및 각 페이지 제작하여 하이퍼링크로 연결
  • index.html(메인) , HTML CSS JavaScript(1.html ~ 3.html)
<!doctype html>
<html>
<head>
  <title>Home page</title>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="index.html">Web Application</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
  </nav>
  <article>
    <h2>Welcome</h2>
    Happy coding!!
  </article>
</body>
</html>
반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

줄바꿈 설정  (0) 2020.09.18
셀렉트 박스 링크 연결하기  (0) 2020.08.30
CSS 들여쓰기, 내어쓰기(text-indent)  (0) 2020.08.20
CSS 색상표 참고 사이트  (0) 2020.08.18
input file타입 확장자 제한하기  (0) 2020.08.14
반응형

# 영어 등 줄바꿈 설정

  • 한글은 줄바꿈이 가능하지만, 영어는 줄바꿈이 존재하지 않음.
  • 아래 값을 추가하여 줄바꿈 가능하도록 설정.
  • word-break: break-all;
반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

생활코딩 HTML & Internet 강의 정리  (0) 2020.11.06
셀렉트 박스 링크 연결하기  (0) 2020.08.30
CSS 들여쓰기, 내어쓰기(text-indent)  (0) 2020.08.20
CSS 색상표 참고 사이트  (0) 2020.08.18
input file타입 확장자 제한하기  (0) 2020.08.14
반응형

# 셀렉트 박스 링크 연결하기

  • 셀렉트 박스에 링크를 연결하기 위해서는 아래와 같이 진행하면 된다.
// 현재 창에서 선택된 링크를 연결하는 경우 location.href=""; 를 이용한다.
<select name="cateItemName" id="cateItem" onchange="if(this.value) location.href=(this.value);">
  <option>포털 선택</option>	
  <option value="https://www.naver.com">네이버</option>
  <option value="https://www.daum.net">다음</option>
</select>

//새 창에서 선택된 링크를 연결하는 경우 window.open=""; 를 이용한다.
<select name="cateItemName" id="cateItem" onchange="if(this.value) window.open=(this.value);">
  <option>포털 선택</option>	
  <option value="https://www.naver.com">네이버</option>
  <option value="https://www.daum.net">다음</option>
</select>
반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

생활코딩 HTML & Internet 강의 정리  (0) 2020.11.06
줄바꿈 설정  (0) 2020.09.18
CSS 들여쓰기, 내어쓰기(text-indent)  (0) 2020.08.20
CSS 색상표 참고 사이트  (0) 2020.08.18
input file타입 확장자 제한하기  (0) 2020.08.14
반응형

# CSS 들여쓰기, 내어쓰기

  • 들여쓰기, 내어쓰기를 위해 text-indent를 사용한다.
  • text-indent의 값이 양수 일 경우 들여쓰기, 음수 일 경우 내어쓰기가 된다.
  • text-indent의 값은 기본적으로 0이다.
input {
	text-indent : 1rem;
}

or 

input {
	text-indent : - 1rem;
}
반응형
저작자표시

'프로그래밍 > HTML, CSS, JSP, 서블릿' 카테고리의 다른 글

줄바꿈 설정  (0) 2020.09.18
셀렉트 박스 링크 연결하기  (0) 2020.08.30
CSS 색상표 참고 사이트  (0) 2020.08.18
input file타입 확장자 제한하기  (0) 2020.08.14
textarea 설명, textarea 속성  (0) 2020.08.03

+ Recent posts

티스토리툴바