semantic 태그, non-semantic 태그, div, span 

 

 

이번 글에서는

semantic tag 와 non-semantic tag에 대해

얘기해보겠다.

간단하게 설명하자면

1. semantic 뜻은 의미가 있는 태그이고

2. non-semantic 은 아무 의미가 없는

태그를 뜻한다.

이게 무슨 말일까?

예를 들면 h1 태그는 의미가 있다.

이것은 제목이라는 걸 알 수 있다.

하지만

<div>무엇일까?</div>

div 태그의 경우는 아무 의미가 없다.

굳이 뜻을 찾으면 division 정도이다.

이 태그는 헤더 푸터 내비게이션 등등

뭔가를 지칭하지 않고

아무 의미가 없다.

비슷하게 span 태그도 non-semantic 태그다.

span의 짧다는 뜻인데.

그게 다다.

이게 짧은 타이틀인 건지,

문단인 건지 설명인지,

전혀 알 수가 없다.

section 태그는 말 그대로 부분이다.

그래서 의미가 있다고 볼 수 있다.

또 비슷한 의미로

article 태그가 있다.

이것도 어떠한 항목을 의미한다.

의미가 있다고 볼 수 있다.

header 태그는 머리말 부분,

영역이기 때문에 의미가 있다고 볼 수 있다.

이와 같이 header, article, section 과 같은 태그와

div , span 과 같은 태그에는 큰 차이가 있다.

주로 나는 header와 같은 태그를 사용한다.

그런데 박스 같은 것이 필요할 때

div와 같은 태그를 사용한다.

div는 컨테이너, 박스와 같은 태그다.

그 안에 내용물을 넣을 수도 있다.

span은 텍스트를 위한 컨테이너다.

텍스트를 위해서는 제목 title,

문단 p와 같은 태그가 있는데

이와 같은 경우는 아니고

텍스트를 위한 컨테이너가 필요하면

span을 쓰면 된다.

다시 반복하면 semantic 태그는

제목, 문단, 내비게이션 등등

뭔가 뜻이 있는 태그이고

non-semantic-태그는

아무 지칭하는 바가 없는

의미 없는 태그를 뜻한다.

 

 

 

 

출처 : 

blog.naver.com/cksdn4214/222004261013

'Web Programming Language > HTML' 카테고리의 다른 글

<form> 태그  (0) 2020.10.26
div, id  (0) 2020.10.24
<a> </a> 태그  (0) 2020.10.21
HTML) 목록(리스트)을 표현하는 태그 <ul>, <ol>, <li>, <dl>  (0) 2020.10.21
herf 속성  (0) 2020.10.21

cls 명령어

 

콘솔 화면에 있는 모든 명령어들을 지워준다.

 

유닉스, 리눅스의 clear 명령어와 유사하다.

 

윈도우 cmd, 리눅스, 유닉스 명령어

 

 

netstat -na 명령어
 


-a’옵션은 연결된 혹은 연결을 기다리고 있는 모든 포트를 보여주는 옵션

 

-n’은 컴퓨터 이름 대신 IP 주소가 보이도록 하는 옵션

'Linux > Linux 명령어' 카테고리의 다른 글

리눅스에서 붙여넣기 ctrl + v 사용  (0) 2020.10.20
strings 명령어  (0) 2020.10.06
man 명령어  (0) 2020.10.05
objdump 명령어  (0) 2020.10.05
Linux) file 명령어  (0) 2020.10.05

반복문과 배열의 활용

 

scandir() 함수 : 지정된 경로 내의 파일과 디렉토리를 나열. (배열 형태로 만듦.)

 

 

 

목표 :

data 디렉토리에 있는 파일의 목록을 가져와서,
해당 파일을 목록 하나 하나로 li와 a태그를 이용하여
글목록을 만들어보자.

 

 

[data 디렉토리]

 

 

 

 

 

먼저, 디렉토리 안의 파일 리스트를 가져오는 php 함수를 찾아보자.

 

 

 

 

scandir( ) 함수가 그러한 기능을 한다는 것을 알아내었다.

 

 

 

 

 

변수로 대상 디렉토리의 파일 목록을 받아올 수 있다.

 

아래 예제를 보면,

 

먼저, dir 변수에 해당 디렉토리의 경로를 넣어준다.

그다음 이 dir 변수(디렉토리 경로) 값을 scandir( ) 함수에 넣어줌으로써 결과로 받아오는 파일 목록값을

files1 변수에 넣어주면, 결국 이 files1 변수로 디렉토리의 파일 목록을 가져올 수 있게된다.

 

 

 

 

 

디렉토리의 파일 목록을 받아오는 또 다른 방법으로는, 

 

 

$files1 = scandir('./tmp');

이런식으로 scandir( ) 함수에 디렉토리 경로를 바로 받아와서 사용할 수도 있다.

 

 

 

 

 

 

 

이어서, scandir( ) 함수를 좀 더 살펴보면 받아오는 디렉터리의 파일을 배열 형태로 가져오는 것을 알수있다.

 

 

 

 

 

 

이제, 목표대로 코드를 작성해보자.

 

목표 : data 디렉토리에 있는 파일의 목록을 가져와서, 
해당 파일을 목록 하나 하나로 li와 a태그를 이용하여 
글목록을 만들어보자.

 

 

 

<php 소스코드>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <title></title>
  </head>
  <body>


    <h1><a href="index4.php">WEB</a></h1>

    <ol>


      <?php
        $list = scandir('./data');           /* scandir() 함수 : 지정된 경로 내의 파일과 디렉토리를 나열. 배열 형태로 만듦.
                                              현재위치의 data 디렉토리에 파일과 디렉토리를 배열 형태로 나열. list라는 이름의 배열로 */

        echo "list배열 원소 개수 : ", (count($list));                 // list 배열의 원소 개수 출력. count() 함수 : 배열의 원소의 갯수를 출력.
        echo '<br>';
        echo "list배열 원소들 출력 : ";
        print_r ($list);                      // list 배열 원소들 출력.

        echo '<br>';
        echo '<br>';

        $i = 0;                                // 배열 원소는 [0]부터 시작.

        while($i < count($list)){              // 반복문. list 배열의 원소 개수만큼 반복하겠다.
          if($list[$i] != '.'){                /* scandir() 함수를 사용하여 파일과 디렉토리를 가져오면
                                                첫번째, 두번째 항목을 . 과 .. 으로 가져올 때가 있다.
                                                이 항목들을 제외하여 출력할 것이다. */
            if($list[$i] != '..'){
                echo "<li><a href=\"index4.php?id=$list[$i]\">$list[$i]</a></li>\n";
              }                                /* 하이퍼링크로 id 파라미터값을 원소들 값으로 받아오겠다.
                                                 또한, 이를 가지고 list 배열의 원소들 값 목록 생성. */
            }
          $i = $i + 1;
        }
       ?>


    </ol>


    <h2>
      <?php
      if(isset($_GET['id'])){                       /* isset() 함수 : 해당 변수가 선언되었는지 확인하고 그렇다면 True, 아니면 False를 출력. 즉 if ()안에 true, false 값을 주게된다.
                                                    즉, isset() 함수 괄호안에 변수로 GET방식으로 id 파라미터값을 받아오려하는데 이 id 파라미터값이 존재하는지 확인하는 조건문이다. */

        echo $_GET['id'];                           // id 파라미터값이 존재한다면 해당 id 파라미터값 출력.
      }
      else {                                        // 존재하지 않는다면 else {}안 입력값 실행.(else { }안에 입력한 값 출력.)
        echo "Welcome!";
      }
      ?>
    </h2>


      <?php
      if(isset($_GET['id'])){                       /* isset() 함수 : 해당 변수가 선언되었는지 확인하고 그렇다면 True, 아니면 False를 출력. 즉 if ()안에 true, false 값을 주게된다.
                                                    즉, isset() 함수 괄호안에 변수로 GET방식으로 id 파라미터값을 받아오려하는데 이 id 파라미터값이 존재하는지 확인하는 조건문이다. */

        echo file_get_contents("data/".$_GET['id']);      /* file_get_contents() 함수는 해당 경로에 있는 파일의 내용을 가져오는 함수이다.
                                                      여기서는, data 폴더안의 (GET함수로 받아온 id 파라미터값에 해당하는 이름의 파일)파일의 내용을 가져오게된다.
                                                      id 파라미터값은 하이퍼링크를 클릭하여 받아온 값이 된다(위에 코드 참고). CSS,HTML,JavaScript 셋 중 하나.
                                                      "data/"와 $_GET['id']을 .을 통해 연결해 data/CSS 또는 data/HTML 또는 data/JavaScript 경로의 모습으로 완성되게된다.
                                                      CSS, HTML, JavaScript 파일에는 각각 다른 내용을 입력해 저장해두었다.
                                                          */
        }
      else {                                        // 존재하지 않는다면 else {}안 입력값 실행.(else { }안에 입력한 값 출력.)
        echo "Hello~";
      }
      ?>
  </body>
</html>

 

 

 

 

 

 

 

 

<웹페이지 출력>

 

 

1. id 파라미터값을 입력하지 않았을때

 

 

 

 

 

2. HTML 하이퍼링크를 클릭하였을때

 

 

 

 

 

 

3. CSS 하이퍼링크를 클릭하였을때

 

 

 

 

 

4. JavaScript 하이퍼링크를 클릭하였을때

 

 

 

 

 

 

5. MySQL 하이퍼링크를 클릭하였을때

 

 

 

 

 

6. PHP 하이퍼링크를 클릭하였을때

 

 

 

 

 

  • data 디렉토리에 GitHub 파일을 새로 생성하였을때

 

 

 

아래와 같이 목록에서도 추가가 되는 것을 볼 수 있다.

 

 

'Web Programming Language > PHP' 카테고리의 다른 글

empty() 함수  (0) 2020.10.26
PHP) php header utf-8, euc-kr 인코딩 변환  (0) 2020.10.26
배열  (0) 2020.10.23
반복문 while  (0) 2020.10.23
조건문 활용, isset() 함수  (0) 2020.10.22

배열

 

 

array() : 배열을 표현할때 사용한다. 배열 표현식.

 

count() 함수 : 배열의 원소 총 개수를 출력.

 

array_push() 함수 : 배열에 원소 추가.(끝에 추가함.)

 

print_r() 함수 : 사람이 읽을 수 있는 변수 정보를 출력. 배열을 출력할 경우, 배열의 원소들 값과 구조를 출력함.

 

var_dump() 함수 : 데이터타입과 결과값 출력. 배열을 출력할 경우, 배열의 원소들 값과 구조를 데이터타입과 함께 출력함.

 

echo '<br>';     :    html의 <br> 태그를 사용할땐 echo와 ' '를 사용해야 되나봄. 

 

 

 

 

<php 소스코드>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Array</title>
  </head>
  <body>
    <h1>Array</h1>
    <?php
    $friends = array('david', 'garcia', 'sergio', 'poden');     // 배열 표현식. array()는 배열을 표현할때 사용한다.

    echo $friends[1];           /* 배열의 원소값 출력. garcia가 출력된다. friends라는 이름의 배열의 2번째에 있는 원소값 출력.                      순서는 0부터 시작한다. */
    echo '<br>';                // html의 <br> 태그를 사용할땐 echo와 ' '를 사용해야 되나봄.
    echo $friends[3];           // friends라는 이름의 배열의 4번째에 있는 원소값 출력.
    echo '<br>';

    echo count($friends);       // count() 함수 : 배열의 원소 총 개수를 출력.

    echo '<br>';

    var_dump(count($friends));  // var_dump() 함수 : 데이터타입과 결과값 출력.

    array_push($friends, 'yankee');   // array_push() 함수 : 배열에 원소 추가.(끝에 추가함.)
    echo '<br>';
    echo '<br>';

    echo "PHP에서 배열 구조와 값을 표시하는 방법 : print_r, var_dump";
    echo '<br>';

    print_r($friends);         /* print_r() 함수 : 사람이 읽을 수 있는 변수 정보를 출력.
                                 배열을 출력할 경우, 배열의 원소들 값과 구조를 출력함. */
    echo '<br>';
    var_dump($friends);       /* var_dump() 함수 :
                                배열을 출력할 경우, 배열의 원소들 값과 구조를 데이터타입과 함께 출력함  */
    ?>
  </body>
</html>

 

 

 

 

<웹페이지 출력>

 

'Web Programming Language > PHP' 카테고리의 다른 글

PHP) php header utf-8, euc-kr 인코딩 변환  (0) 2020.10.26
반복문과 배열의 활용  (0) 2020.10.23
반복문 while  (0) 2020.10.23
조건문 활용, isset() 함수  (0) 2020.10.22
조건문 if  (0) 2020.10.22

반복문 while

 

 

<php 소스코드>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Loop</title>
  </head>
  <body>
    <h1>while</h1>
    <?php
    echo '1<br>';

    $i = 0;

    while($i < 3){                   // html의 <br>을 사용하려면 ' '을 써야하나보다. 원래 숫자는 ''에 넣지 않아도 되는데, 쓰는걸 보니.
    echo '2<br>';
    $i = $i + 1;
    }
    
    echo '3<br>';
     ?>
  </body>
</html>

 

 

 

 

<웹페이지 출력>

 

 

 

'Web Programming Language > PHP' 카테고리의 다른 글

반복문과 배열의 활용  (0) 2020.10.23
배열  (0) 2020.10.23
조건문 활용, isset() 함수  (0) 2020.10.22
조건문 if  (0) 2020.10.22
var_dump() 함수, 비교 연산자의 사용, Boolean 데이터타입  (0) 2020.10.22

+ Recent posts