Lim Junhyeong

Lim Junhyeong

준형이 블로그

웹 프로그래밍 기본

Updated:

웹 프로그래밍 기본

  • HTML

    정보 또는 설계도

  • CSS

    디자인 또는 스타일링

  • JavaScript

    기능과 효과

웹 사이트 제작시 고려 사항

  • 웹 표준

    웹 사이트 작성시 따라야하는 공식 표준이나 기술 규격

  • 웹 접근성

    장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 
있게 하는 방식

  • 크로스 브라우징

    모든 브라우저 또는 기기에서 사이트가 제대로 
작동하도록 하는 기법

HTML 태그 구성요소

<열린태그 속성 = "속성값">컨텐츠</닫힌태그>
  • 태그명 : HTML이 갖고 있는 고유의 기능
  • 속성 : HTML태그가 갖고 있는 추가 정보
  • 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행
  • 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물

HTML 문서의 기본구조

<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html>          <!-- HTML 문서의 시작과 끝-->
<head>          <!-- 문서와 관련된 요약 정보 정리-->
    <meta charset="UTF-8">      <!-- 문자 코드(문자를 안깨지게 한다)-->
    <title>웹프로그래밍</title>  <!-- 웹사이트 제목-->
</head>
<body>          <!-- 웹사이트 내용 -->
    안녕
</body>
</html>

HTML 주요 태그

a 태그

<a href = "https://naver.com" target="_blank">네이버</a> * 글자나 이미지 클릭시 다른 사이트로 이동 * href : 연결할 페이지의 주소를 지정 * target : 어떤 방식으로 페이지로 이동할지 결정   * _blank : 새탭을 열어서 이동   * _self : 현재탭에서 이동 (defualt값)

img 태그

<img src = "logo.png" alt = "회사로고"> * 이미지를 삽입 * src : 삽입할 이미지 파일 경로 * alt : 웹사이트가 이미지를 출력하지 못했을 경우 텍스트 정보로 대체 * 닫힘 태그가 없다

<!-- 다음과 같이 함께 사용하면 이미지 클릭시 페이지 이동을 할 수 있다 -->
  <a href="">
    <img src = "">    
  </a>

h 태그

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6> * h1 ~ h6 으로 사용 * header의 약자고 제목이나 부제목 표현

p 태그

  • paragraph의 약자로 단락을 표현할 때 사용

ol, ul, li 태그

  <ol>
    <li>메뉴1</li> 1. 메뉴1
    <li>메뉴2</li> 2. 메뉴2
    <li>메뉴3</li> 3. 메뉴3
  </ol>

  <ul>
    <li><a>홈</a></li> * 메뉴1
    <li><a>회사소개</a></li> * 메뉴2
    <li><a>연락처</a></li> * 메뉴3
  </ul>
  
  a 태그와 함께 많이 사용된다

  • ol : Ordered list의 약자로 순서가 있는 리스트 생성

    기본으로 숫자가 들어감
  • ul : Unordered list의 약자로 순서가 없는 리스트 생성
  • li : ol 과 ul 의 각 항목을 나열할 때 사용

header, nav 태그

<header> <!-- 상단 영역 -->
  <img src = "naver.png" alt="naver">
  <nav>  <!-- 메뉴 영역 -->
    <ul>
      <li>홈</li>
      <li>과목 목록</li>
    </ul>
  </nav>
</header>
  • header : 웹사이트의 머리글을 담는 공간
  • nav : 메뉴 버튼을 담는 공간. ul, li, a와 함께 사용

main, article 태그

<main role="main"> <!-- 본문 영역 -->
  <article> <!-- 정보 영역 -->
  ...
  </article>
  <article>
  ...
  </article>
</main>
  • main : 문서의 주요 내용을 담는 태그 (IE는 지원안함)
  • article : 문서의 주요 이미지나 텍스트 등의 정보가 담기는
<footer> <!--하단영역 -->
  <p>주소 : ... </p>
  <p>이메일 : ... </p>
</footer>
  • 하단에 정보를 추가

div 태그

  • 임이의 공간을 만들때 사용
  • header, main, footer로 나누기 애매한 구역을 나눌때 사용
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>엘리스 :: elice</title>
</head>
<body>
  <header>
      <h1>
          <img src = "elice_logo.png">
      </h1>
      <nav>
          <ul>
              <li><a href>홈</a></li>
              <li><a href>회사소개</a></li>
              <li><a href>연락처</a></li>
          </ul>
      </nav>
  </header>
  <main role = "main">
      <article>
          <h2>회사 소개</h2>
          <p>회사 소개와 관련된 본문 내용</p>
      </article>
  </main>
  <footer>
      <div>
      </div>
      <p>02-123-1234</p>
  </footer>
  
</body>
</html>

Block 요소와 Inline 요소

<!-- Block 요소 -->
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
<!-- inline 요소 -->
  <a>hello</a>
  <a>hello</a>
  <a>hello</a>
  • 줄바꿈 현상
  • 가로, 세로
  • 상, 하 배치

CCS

  • Cascading Style Sheet의 약자
  • 정보(HTML)와 디자인(CSS)의 분리
  • HTML로 작성된 정보를 꾸며주는 언어

CSS 구성요소

  선택자 {속성:속성값;}
  
  h1 {
    font-size: 20px;
    font-family: sans-serif;
    color: blue;
    background-color: yellow;
    text-align: center;
  }
  • 선택자 : 디자인을 적용할 HTML 영역
  • 속성 : 어떤 디자인을 적용할지 정의
  • 속성값 : 어떠 역할을 수행할지 구체적으로 명령

External Style Sheet

<head>
  <link rel="stylesheet" href = "style.css">
</head> * CSS와 HTML 연동 방식 * 유지보수가 쉽고 가독성이 좋다

CSS 선택자

  • html어떤 요소에 css를 적용시킬 것인가

    * type 선택자
h1{
  text-align:center
}
  
* class 선택자
.coding{
  text-align:center
{
  
* id 선택자
#coding{
  text-align:center
{

부모 자식 관계

style.css

  header {
    color : red ;
  }
  header h1 {
    color :blue;
  }
  header p {
    color : green;
  }

html

  <header>
      <h1>Header h1</h1> <!-- blue -->
      <p>Header p</p>    <!-- green -->
  </header>
  <footer>
      <h1>Footer h1</h1> <!-- black -->
      <p>Footer p</p>    <!-- black --> 
  </footer>

캐스케이딩

  • 나중에 작성한 코드가 우선 순위를 갖습니다

    /* p { color: red; } */ 
p { color: blue; }

  • 더욱 상세하게 작성한 코드가 우선 순위를 갖습니다

    /* p { color: red; } */ 
p header { color: blue; }

  • 스타일, 아이디, 클래스, 타입 순으로 우선 순위를 갖습니다

    /* h3 { color: green; } */ 
#color { color: blue; }

CSS 주요 속성

width, height

.paragraph{
  width:500px;
  height:500px;
}
  • 선택한 요소의 넓이와 높이를 설정

font-

.paragraph{
  font-size:50px; /* 글자 크기 */
  font-family:Arial, sans-serif; /* 글꼴(sans-serif가 default이다) */ 
  font-style: italic; /* 글자 기울기 */
  font-weight: bold; /* 글자 두께 */
}

border-

.paragraph{
  border-style:solid;
  border-width:10px;
  border-color:red
  /* border: solid 10px red; */
}
  • 테두리의 두께, 색 등을 설정

background-

.paragraph{
  background-color: yellow;
  background-image: url(이미지 경로);
  background-repeat:no-repeat;
  /* 이미지의 반복효과 */
  bockground-position: left;
  /* 이미지의 좌표 변화 */
  /* background: yellow url(이미지 경로) no-repeat left; */
}
  • 배경 색상, 이미지 등을 설정

Tags: ,

Categories:

Updated:

Leave a comment

You may also enjoy