[태그:] HTML

[HTML5&CSS] HTML5 기본 구조

다솜돌이 Leave a comment

처음 doc type을 정한다. HTML5부터는 매우 심플하다.

<!DOCTYPE HTML>

 

HTML 태그로 시작한다. lang attribute로 어느 언어인지를 명시한다.

<html lang=”en”></html>

 

html 태그 안에는 head와 body가 들어간다.

먼저 head 안에 들어갈 내용을 살펴보자.

head의 필수 태그는 title이다. title 태그 전에 meta 태그로 charset을 명시해준다.

meta 태그로 해당 페이지의 description을 적어주면 좋다.

meta 태그로 디바이스의 width와 초기 scale로 viewport도 적어준다.

<head>

<meta charset=”utf-8″>

<title>DasomOLI’s example1</title>

<meta name=”description” content=”The purpose of this page is for showing a example of HTML5 basic structure”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

</head>

 

body 태그 안엔 보일 내용을 내용의 목적에 맞는 태그를 사용해서 적는다.

대표적인 태그는 제목을 적을 때 사용하는 heading <h1>, <h2> 등의 태그와 리스트를 작성할 때 사용하는 unordered list <ul>, ordered list <ol>, 그리고 그 아래 항목을 적을 때 사용하는 list item <li>, 문단을 작성할 때 사용하는 paragraph <p> 태그 등이 있다.

<body>
<h1>DasomOLI’s example1</h1>
<p>Hello HTML5!</p>
</body>

모두 합치면 다음과 같을 것이다.

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <metacharset=”utf-8″>
    <title>DasomOLI’s example1</title>
    <metaname=”description”content=”The purpose of this page is for showing a example of HTML5 basic structure”>
    <metaname=”viewport”content=”width=device-width, initial-scale=1″>
  </head>
  <body>
    <h1>DasomOLI’s example1</h1>
    <p>Hello HTML5!</p>
  </body>
</html>

완성된 html 은 w3c에서 제공하는 validator (https://validator.w3.org/)를 통해 유효성을 검사할 수 있다.

 

ATOM editor 사용법

다솜돌이 Leave a comment

생활코딩에 Atom editor 사용법(https://opentutorials.org/module/1579)이 있길래, 보면서 몇가지 적는다. 적다보니, 내가 뭘 또 이런 것까지 적고 있나 싶긴 한데… ^^;;

  • Toggle tree view:  View / Toggle Tree view (Ctrl + \)
  • Find in buffer: Ctrl + F
  • Find Next: F3, Find Previous: Shift + F3
  • Find File: Ctrl + P. 파일명 일부 혹은 패턴만 쳐도 찾아준다.
  • 아래쪽 오른쪽에 나온 Auto detect 된 File type이 나온다. 변경하고 싶다면 클릭 후 변경.
  • Toggle Developer tools: View / Developer / Toggle Developer tools (Ctrl + Shift + I)
  • Stylesheet: Atom 에디터 내의 element들의 lesscss를 수정할 수 있다. File / Stylesheet
  • Plugins:
    • emmet: HTML tag 작성 시, syntax 작성 후 Tab 혹은 Ctrl+E 하면 html로 풀어준다.
      • !: html template 입력
      • li*20: <li></li> 가 20개 입력.
      • li>a*20: <li> <a href=””></a><a href=””></a>…<a href=””></a> </li>
      • (li>a)*20: <li><a href=””></a></li> <li><a href=””></a></li>…<li><a href=””></a></li>
      • Syntax: https://docs.emmet.io/cheat-sheet/, 더 자세히는 https://docs.emmet.io/abbreviations/syntax/, CSS도 abbreviation 제공(https://docs.emmet.io/css-abbreviations/)
        • Child: >
          • div>ul>li 
            <div>
    <ul>
        <li></li>
    </ul>
</div>
        • Sibling: +
          • div+p+bq 
            <div></div>
<p></p>
<blockquote></blockquote>
        • Climb up: ^
          • nav>ul>li^^a 
            <nav>
    <ul>
        <li></li>
    </ul>
</nav>
<a href=""></a>
        • Multiplication: *
          • a*10 
            <a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
        • Grouping: ()
          • nav>ul>(li>a)*5 
            <nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>
        • Attiribute:
          • ID attribite: #
            • nav#navigation 
              <nav id="navigation"></nav>
          • Class attribute: .
            • li.list 
              <li class="list"></li>
          • Tag attribute: []
            • a[target=”_blank” title=”asdf”] 
              <a href="" target="_blank" title="asdf"></a>
        • Value: {}
          • li>a>{table} 
            <li><a href="">table</a></li>
        • Numbering: $
          • ul.li.item$*5 
            <ul class="li item1"></ul>
<ul class="li item2"></ul>
<ul class="li item3"></ul>
<ul class="li item4"></ul>
<ul class="li item5"></ul>
    • script: script를 입력 후 단축키(Shift + Ctrl + B로 바로 실행 결과 확인. 실행 환경은 따로 설치해야 함.

HTML 자동 이동 – meta refresh

다솜돌이 Leave a comment

<html>

<head>

<meta http-equiv=”refresh” content=”0; url=./index.php”>

</head>

<body onload=”javascript:window.location=’./index.php'”>

Please follow <a href=”index.php”>this link</a>

</body>

</html>

참고: https://en.m.wikipedia.org/wiki/Meta_refresh

Shell script 에서 자주 쓰는 명령들

다솜돌이 Leave a comment

처음 시작은
#!/bin/sh

Perl 처음 시작은
#!/usr/bin/perl -w

argument는 $0 $1 $2 …
argument 처리는 아래 형식.

for ARGUMENT in “$@”; do
case $ARGUMENT in
–commit)
COMMIT=$2;
;;
–uploader)
UPLOADER=$2;
;;
–branch)
BRANCH=$2;
;;
–patchset)
PATCHSET_ID=$2;
;;
–change-url)
CHANGE_URL=$2;
CHANGE_NO=`basename $CHANGE_URL`;
;;
esac
shift;
done

Perl에서 Argument 처리는
$ARGV[0], $ARGV[1], $ARGV[2]… $#ARGV 는 argument 개수
 

공백으로 나눠진 파라미터 프린트
gawk ‘{print $1}’

/로 나눠진 마지막 파라미터 프린트. cut 도 사용가능
gawk -F / ‘{print $NF}’

파일명 얻기는
basename 경로명

디렉토리명 얻기는
dirname 경로명

절대경로 얻을 때는
readlink -e 상대경로

특정 문자열 치환은
sed -e “s/문자열/문자열/g”

if는 이런 형식. 비교식은 http://www.gnu.org/s/bash/manual/bash.html#Bash-Conditional-Expressions 참고

if [ “$변수” = “” ]; then
  명령;

elif
  명령;
else
  명령;
fi

for each 는 이런 형식

for 변수 in $가져올변수
do
  echo “$변수”
done

case는 위의 argument 처리 참고.

명령의 결과 저장은 `명령`
변수의 값으로 치환한 문자열은 “$변수 포함 문자열”
그냥 그대로 문자열은 ‘문자열’

끝에만 자를 땐
tail -n 숫자

앞에만 자를 땐
head -n 숫자

문자열 있는 줄만 얻고 싶을 땐
grep “문자열”

정규식으로 찾은 문자열 포함된 줄만 얻고 싶을 땐
grep -P “^문자열[0-9a-zA-Z-_/]*$”

basic http 인증은 https://wiki.jenkins-ci.org/display/JENKINS/Authenticating+scripted+clients 참고

html 얻어올 때는
curl “주소”