HTML은 웹 문서의 내용을 맡고, CSS는 웹 문서의 디자인을 담당한다.

스타일과 스타일 시트

 

  • 내부 스타일 시트

: <head>태그과 </head> 태그 안에서 정의해야 하고 <style>태그와 </style> 태그 사이에 작성한다.

 

  • 외부 스타일 시트

: 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것

<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">

 

  • 인라인 스타일

: 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

ex)
<p style="color:blue;"> 인라인 스타일 </p>

 

주요 선택자

 

  • 전체 선택자 : 모든 요소에 스타일 적용하기 
* { 속성 : 속성 값; 속성 : 속성 값; ... }

ex) 
* {
	margin: 0;
    padding : 0;
}

 

  • 태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용하기
태그 { 스타일 }

ex)

p {
	font-size:small; // 글자 크기
    font-weight:blod; // 글자 모양
}

 

  • 클래스 선택자 : 특정 부분에 스타일 적용하기
.클래스명 { 스타일 }

ex)
.bluetext{
	color : blue;
}

...

<p class="bluetext"> 클래스 선택자 </p>

 

  • id 선택자 : 특정 부분에 스타일 적용하기

※ 클래스 선택자와 비슷하지만 id 선택자는 딱 한번만 쓸 수 있다.

#아이디명 { 스타일 }

ex)
#container {
	width : 400px;
    height : 200px;
    margin : 0 auto;
}

...

<div id="container"> id 선택자 </div>

 

  • 그룹 선택자 : 둘 이상 요소에 같은 스타일 적용하기
이름, 이름 .. { 스타일 }

 ex)
 h1, h2 {
 	text-align:center;
 }

 

캐스캐이딩(Cascading) 스타일 시트(CSS)

: 캐스캐이딩이란 '위에서 아래로 흐르는 스타일 시트'라는 뜻으로, 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다.

1. 스타일 우선 순위

- (명시도) 인라인 스타일 > id스타일 > 클래스 스타일 > 태그 스타일

- (Source Order) 같은 스타일의 경우, 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

 

2. 스타일 상속

 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.

※ 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다.

 

텍스트 관련 스타일

  • font-family : 글꼴을 지정하는 속성
  • font-size : 글자 크기를 지정하는 속성
  • font-weight : 글자 굵기를 지정하는 속성
  • font-sytle : 글자 스타일을 지정하는 속성
  • color : 글자 색을 지정하는 속성
  • text-decotation : 텍스트에 줄 표시하기 / 없애기 ex) 링크에서 생기는 밑줄 없애기
  • text-align : 텍스트 정렬하기
  • text-overflow : 넘치는 텍스트 표기하기
  • list-style : 목록 스타일 지정하기

 

색상과 배경을 위한 스타일

  • background-color : 배경색을 지정하는 속성
  • background-image : 배경 이미지를 지정하는 속성
  • background-repeat : 배경 이미지의 반복 방법을 지정하는 속성
  • background-size : 배경 이미지의 크기를 조절하는 방법
  • background-position : 배경 이미지의 위치를 지정하는 방법
  • background-origin : 배경 이미지의 배치 기준 조절하는 방법
  • background-attachment : 배경이미지의 고정 여부를 지정하는 속성 ex) 화면이 스크롤되더라도 배경 이미지는 고정되게 하기
  • background-size : 배경 이미지의 크기를 조절하는 속성
  • background : 배경을 한꺼번에 지정하는 속성

 

레이아웃을 위한 스타일

  • width, height : 박스 모델의 너비와 높이
    • 속성을 auto 로 설정 시 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동의로 결정됨
  • display : 화면에서 요소가 어떻게 보일지를 결정하는 속성
    • display : flex : 가로 정렬
  • border :  박스 모델의 테두리 - style, width, color, radius, shadow
  • margin : 박스 모델의 마진(요소와 요소 사이의 여백)
  • padding : 박스 모델의 패딩(테두리와 내용 사이의 여백)
  • border-radius : 박스 모델의 모서리를 둥글게 처리

 

CSS 포지셔닝

  • float : 왼쪽이나 오른쪽에 배치
    • 문서 구조 만들기 - header, sidebar, contents, footer ...
  • clear : float 속성 해제
  • positon : 배치 방법 지정
    • fixed 속성 값 : 브라우저 창 기준으로 배치하기 ex) top 버튼 : 스크롤하더라도 정해진 위치에 계속 고정
  • visibility : 요소를 화면에 표시하거나 감추기
    • ex) 팝업창 삭제 시 visible에서 hidden으로 변경하기
  • z-index : 요소의 쌓는 순서 결정
  • column : 다단 편집 
    • 속성 : width(단의 너비), count(단의 개수), gap(단과 단 사이 여백), rule(구분선의 색상, 스타일, 너비), break-after(다단 위치 지정), column-span(여러 단을 하나로 합치기) 
  • border-collapse : 테두리 합치기
  • table-layout : 콘텐츠에 맞게 셀 너비 지정
  • vertical-align : 셀 안에서 수직 정렬
반응형

'잡동사니' 카테고리의 다른 글

TOEIC Speaking 유형 정리 & 템플릿  (0) 2020.03.05
[CSS]CSS 기초1  (0) 2020.01.30
[HTML] HTML 태그  (0) 2020.01.22
STT(Speech-to-Text)  (1) 2019.06.02
LG그램 노트북 공장초기화 실패 해결하기  (2) 2019.06.02
  1. php.ini -> file_upload=On; 변경
  2. file_upload_form.php
<html>
<head>

<title>FileUploadForm</title>

</head>

<body>

	<h1>FileUploadExample</h1>

	<form action="./file_upload.php"enctype="multipart/form-data"method='post'>

	<inputtype='file'name='myfile'>

	<button>보내기</button>

	</form>

</body>

</html>

 

   3. file_upload.php

<?php

//설정시작

$uploads_dir='./uploads';

$allowed_ext=array('jpg','jpeg','png','gif');

$field_name='myfile';

//uploads디렉토리가없다면생성

if(!is_dir($uploads_dir)){

if(!mkdir($uploads_dir,0777))

{

die("업로드디렉토리생성에실패했습니다.");

};

}



if(!isset($_FILES[$field_name]))

{

die("업로드된파일이없습니다.");

}

//변수정리

$error=$_FILES[$field_name]['error'];

$name=$_FILES[$field_name]['name'];

//오류확인

if($error!=UPLOAD_ERR_OK){

switch($error){

caseUPLOAD_ERR_INI_SIZE:

caseUPLOAD_ERR_FORM_SIZE:

echo"파일이너무큽니다.($error)";

break;

caseUPLOAD_ERR_PARTIAL:

echo"파일이부분적으로첨부되었습니다.($error)";

break;

caseUPLOAD_ERR_NO_FILE:

echo"파일이첨부되지않았습니다.($error)";

break;

caseUPLOAD_ERR_NO_TMP_DIR:

echo"임시파일을저정할디렉토리가없습니다.($error)";

break;

caseUPLOAD_ERR_CANT_WRITE:

echo"임시파일을생성할수없습니다.($error)";

break;

caseUPLOAD_ERR_EXTENSION:

echo"업로드불가능한파일이첨부되었습니다.($error)";

break;

default:

echo"파일이제대로업로드되지않았습니다.($error)";

}

exit;

}



$upload_file=$uploads_dir.'/'.$name;//저장될디렉토리및파일명

$fileinfo=pathinfo($upload_file);//첨부파일의정보를가져옴

$ext=strtolower($fileinfo['extension']);



$i=1;



while(is_file($upload_file))

{

$name=$fileinfo['filename']."-{$i}.".$fileinfo['extension'];

$upload_file=$uploads_dir.'/'.$name;

$i++;

}



if(!in_array($ext,$allowed_ext)){//확장자확인

echo"허용되지않는확장자입니다.";

exit;

}



if(!move_uploaded_file($_FILES[$field_name]['tmp_name'],$upload_file)){//파일이동

echo"파일이업로드되지않았습니다.";

exit;

}



?>

<html>

<head>

<title>FileUpload</title>

</head>

<body>

  <h1>FileUploadExample</h1>

  <h2>파일정보</h2>

  <ul>

  <li>파일명:<?phpecho$name;?></li>

  <li>확장자:<?phpecho$ext;?></li>

  <li>파일형식:<?phpecho$_FILES[$field_name]['type'];?></li>

  <li>파일크기:<?phpechonumber_format($_FILES[$field_name]['size']);?>바이트</li>

  </ul>

  <ahref="./file_download.php?file=<?phpecho$name;?>">다운로드</a>

</body>

</html>

 

※ move_uploaded_file($_FILES['attachment']['tmp_name'], $file)

: move_uploaded_file는 서버 파일을에 업로드해주는 함수

: $_FILES['input']에서 가져온 ['name값']['tmp_name'] 여기서 'tmp_name'는 임시파일명을 지정해주는것이다. 꼭 'tmp_name'를 쓸것

: $file에는 업로드할 경로와 업로드할 파일명을 합쳐 올린다.

ex) 업로드할 경로는 uploads/ 이고, 업로드할 파일명은 test.txt일경우

uploads/test.txt를 만들어올린다. (따라서 'uploads/test.txt' 이렇게 쓰라는 말임)

 

[error] 업로드 디렉토리 생성에 실패했습니다.

=> 서버에 업로드 파일 생성해줘야한다.

root@choi-VirtualBox:/usr/local/apache24/htdocs# mkdir uploads

 

[error] 파일이 업로드 되지 않습니다. move_uploaded_file

=> 파일 권한을 부여해야한다.

root@choi-VirtualBox:/usr/local/apache24/htdocs# chmod 777 uploads   // 권한 부여

/// 777 : 사용자, 그룹, 다른 사용자의 모든 권한을 추가한다.

root@choi-VirtualBox:/usr/local/apache24/htdocs# ls -l                      // 권한 확인

-> 적용되려면 아파치 재시작해야함

 

 

 

반응형

'APM' 카테고리의 다른 글

[Linux] configure, make, make install 개념  (0) 2020.01.30
[PHP] 쿠키와 세션  (0) 2020.01.30
[error] 533 could not create file  (0) 2020.01.23
[error] 아파치 재시작 시 오류  (0) 2020.01.23
VM(Virtual Machine)이란?  (0) 2020.01.22

원인

업로드되는 폴더에 허용 권한이 없어서 생기는 문제이다.

 

해결

root 권한 계정으로 들어가서, 아래와 같이 명령어로 권한 문제를 해결해준다.

username은 ftp에서 사용할 계정명이다.

 

username@username:/$ sudo chown -R username /경로.../폴더명

반응형

'APM' 카테고리의 다른 글

[PHP] 쿠키와 세션  (0) 2020.01.30
[PHP] PHP 파일 업로드 구현  (0) 2020.01.23
[error] 아파치 재시작 시 오류  (0) 2020.01.23
VM(Virtual Machine)이란?  (0) 2020.01.22
리눅스 서버 시간이 이상할 때  (0) 2020.01.21

ob for httpd.service failed because the control process exited with error code. See "systemctl status httpd.service" and "journalctl -xe" for details.

구동중인 httpd 데몬을 전부 종료하고 다시 시작한다.

종료:

killall -9 httpd

구동:

/usr/local/apache2/bin/apachectl start

 

그래도 정상 구동이 되지 않을 시 해당 httpd.pid 파일을 삭제하고 재시작한다.

해당 파일은 구동 시 자동 생성 되는 파일이므로 삭제 후 재시작을 하여도 무방하다.

반응형

'APM' 카테고리의 다른 글

[PHP] PHP 파일 업로드 구현  (0) 2020.01.23
[error] 533 could not create file  (0) 2020.01.23
VM(Virtual Machine)이란?  (0) 2020.01.22
리눅스 서버 시간이 이상할 때  (0) 2020.01.21
[error] data dictionary initialization utf8 문제  (0) 2020.01.21
HTML 문서 기본 구조
<!DOCTYPE html>
<html>
	
    <head>	// 문서 정보를 주는 태그
    ...
    </head>
	
    <body>	// 화면에 보일 내용 태그
    ...
    </body>
    
    
</html>

 

텍스트 관련 태그
  • 제목 태그 : <h1> 제목 </h1> (1~6까지 있음, 1이 가장 큰 제목)
  • 단락 만들기 : <p> 텍스트 </p>
  • 줄 바꾸기 : <br>

    ※ 띄어쓰기 - &nbsp;

 

목록을 만드는 태그
  • 순서 없는 목록 태그 : <ul>, <li> 
  • 순서 목록 태그 : <ol>, <li>

예제

<ol>
		<li>목록1</li>
		<li>목록2</li>
</ol>

<ul>
		<li>목록1</li>
		<li>목록2</li>
		<li>목록3</li>			
</ul>

 

출력 결과    

1. 목록1
2. 목록2

- 목록1
- 목록2
- 목록3

※ <li> 태그 블릿 없애기 - list-style:none;

 

표를 만드는 태그 <table>
  • <thead> 태그는 표의 제목 영역  <table> 하위, <tr> 상위에 위치합니다.
  • <tbody> 태그는 표의 본문 영역 <thead>와 같은 위치에 존재합니다.
  • <tfoot> 태그는 표 요약 영역
  • <tr> 표의 열 <td> 표의 행

예제

<table>
	<thead>
		<tr>
			<th>학교</th>
			<th>창립년도</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>서울대학교</td>
			<td>1946</td>
		</tr>
		<tr>
			<td>고려대학교</td>
			<td>1905</td>
		</tr>
		<tr>
			<td>연세대학교</td>
			<td>1885</td>
		</tr>
	</tbody>
</table>

 

출력 결과  

학교 창립년도
서울대학교 1946
고려대학교 1905
연세대학교 1885

 

 

이미지와 하이퍼링크
  • 이미지 : <img src="이미지경로" alt="대체_텍스트">
  • 링크 만들기 : <a> 태그 <a href ="링크 주소"> 텍스트 </a>

※ 새 탭에서 링크 열기 : <a href="링크 주소" target="_blank"> 텍스트 </a> 

 

구역을 나누는 태그
  • <div> : 한줄 전체 공간을 차지(block element)
  • <span> 자기 내용물 만큼의 공간만 차지(inline element)

 

반응형

'잡동사니' 카테고리의 다른 글

[CSS]CSS 기초1  (0) 2020.01.30
[CSS]CSS 기초  (0) 2020.01.23
STT(Speech-to-Text)  (1) 2019.06.02
LG그램 노트북 공장초기화 실패 해결하기  (2) 2019.06.02
프론트엔드(Front-end)와 백엔드(Back-end)의 차이  (0) 2019.05.05
  • VM(Virtual Machine)이란?

:  일반적으로 시스템 VM에서 VM이 설치되는 기본 OS를 호스트 OS라고 정의하고, 호스트OS 위에 설치되는 가상 OS를 게스트 OS로 정의 한다.

   - 멀티 부팅 : 하나의 물리적인 H/W에 동일 레벨의 OS가 여러개 설치된 것으로 한 시점에서 하나의 OS밖에 사용할 수가 없지만 하나의 컴퓨터에서 여러 OS를 사용이 가능하다.

  - VM 부팅 : 하나의 물리적인 H/W위에 호스트 OS가 있고 이 호스트 OS위에 여러 게스트 OS를 올릴 수 있으며 하드웨어의 성능에 따라 동시에 여러 OS를 운영할 수 있는 장점이 있다.

 

  • VirtualBox
    • : Oracle에서 개발하는 가상화 소프트웨어다. 상업적인 목적이 아니라면 무료로 사용할 수 있다.
    • 스냅샷 제공 / 무료
  • VMware Player
    • : VMware로 많이 알려져 있는데, 고급 기능을 빼고 개인 사용자에게 무료로 배포되는 소프트웨어다.
    • 스냅샷 유료 / 고급 기능 사용 시 유료

※ 스냅샷이란? :  PC 상태를 저장하고 언제든지 복구할 수 있다. ( 백업 기능 )

 

반응형

'APM' 카테고리의 다른 글

[error] 533 could not create file  (0) 2020.01.23
[error] 아파치 재시작 시 오류  (0) 2020.01.23
리눅스 서버 시간이 이상할 때  (0) 2020.01.21
[error] data dictionary initialization utf8 문제  (0) 2020.01.21
[error] caching_sha1_passwod 문제  (0) 2020.01.21

$ sudo apt-get install rdate

$ sudo rdate -s time.bora.net

재시작하기

반응형

'APM' 카테고리의 다른 글

[error] 533 could not create file  (0) 2020.01.23
[error] 아파치 재시작 시 오류  (0) 2020.01.23
VM(Virtual Machine)이란?  (0) 2020.01.22
[error] data dictionary initialization utf8 문제  (0) 2020.01.21
[error] caching_sha1_passwod 문제  (0) 2020.01.21

MySQL 업데이트 이후,

MySQL 설정 파일 내에서 utf8mb3 라는 명칭을 줄여서 표현한 utf8 이라는 문자셋을 더이상 사용하지 않기 때문에 발생하는 문제이다.

해결 방법 :

MySQL 설정 파일을 편집해야한다.

nano /etc/my.cnf

문자셋 설정 부분에 utf8로 입력된 부분을 모두 찾아 변경해줍니다.

ex)

변경 전

[mysqld] 
init_connect="SET collation_connection=utf8_general_ci" 
init_connect="SET NAMES utf8" 

collation-server = utf8_unicode_ci 
character-set-server = utf8 

[client] 
default-character-set=utf8 
[mysql] 
default-character-set=utf8

변경 후

[mysqld]
init_connect="SET collation_connection=utf8mb4_general_ci"
init_connect="SET NAMES utf8mb4"

collation-server = utf8mb4_unicode_ci
character-set-server = utf8mb4

[client]
default-character-set=utf8mb4
[mysql]
default-character-set=utf8mb4

변경이 완료되면 파일을 저장하고 빠져나와 서비스를 다시 시작합니다.

[root@localhost ~]# service mysqld restart
또는
[root@localhost ~]# systemctl restart mysqld

 

반응형

'APM' 카테고리의 다른 글

[error] 533 could not create file  (0) 2020.01.23
[error] 아파치 재시작 시 오류  (0) 2020.01.23
VM(Virtual Machine)이란?  (0) 2020.01.22
리눅스 서버 시간이 이상할 때  (0) 2020.01.21
[error] caching_sha1_passwod 문제  (0) 2020.01.21

+ Recent posts

티스토리툴바