1234···11
<!DOCTYPE html>
 
<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <h1>Title1</h1>
        <h2>Title2</h2>
        <h3>Title3</h3>
        <h4>Title4</h4>
        <h5>Title5</h5>
        <h6>Title6</h6>
        <hr>
        <p><b>Hi</b><br>I'm <strong>Lemon</strong>.</p>
        <pre>
        
        <i>Lorem ipsum</i> dolor sit amet,        consectetur adipiscing elit.
<em>Integer maximus</em> ex at ante cursus, id semper purus condimentum.
        </pre>
        <p>
        <ins>Aenean luctus</ins> accumsan lectus, in <del>scelerisque erat</del> suscipit vitae.<br>
        Integer gravida sem sed rhoncus cursus.<br>
        <mark>Lorem ipsum</mark> dolor sit amet, consectetur<sup>(1)</sup> adipiscing elit<sub>(2)</sub>.
        </p>
    </body>
</html>

 

 


Text tag

 

<hn>

: heading, 제목태그

n=1~6, 숫자가 클수록 크게표시된다.

 

<p>

: paragraph, 단락태그

값이 하나의 문단으로 출력된다. 단일 사용으로는 문단의 서식 지정이 불가

 

<pre>

: Preformatted text

값이 서식을 포함해 모두 그대로 출력된다.

 

<b>,<strong>

: bold 굵은 글씨, strong의 경우 내용강조 포함

 

<i>,<em>

: italic 기운 글씨, emphasized의 경우 내용강조 포함

 

<mark>

: highlighting effect

 

<ins>

: insert, 밑줄

 

<del>

: delete, 취소선

 

<sup>,<sub>

: superscript 위첨자, subscript 아래첨자

 

 

 

- Empty tag

 

<hr>

: horizontal rule, 가로 구분선

 

<br>

: break line, 줄넘김

'노트정리 > HTML' 카테고리의 다른 글

HTML 요소  (0) 2022.08.06
HTML 구조  (0) 2022.08.06

HTML Element

: 문서의 구성 요소

 

 


Element 구조

<tag attribute="attribute value"> value </tag>

 

Tag

: 태그, 시작태그와 종료태그, 빈태그로 구분 가능

꺾쇠괄호 사이에 표기

 

Values

: 값, 태그의 명령을 받는 데이터

 

Attribute

: 속성, 속성의 이름과 값으로 구분

시작태그 내에서 정의

- css 지정

- 경로 지정

 

ex. rel, href


속성명="속성값" 의 구조가 시작태그 안에 들어가있어야 함

속성의 경우 소문자 작성을 권장

 

'노트정리 > HTML' 카테고리의 다른 글

HTML 텍스트 태그  (0) 2022.08.07
HTML 구조  (0) 2022.08.06

HTML

: Hypertext Markup Language

웹페이지 개발에 사용되는 마크업 언어

 

 

Hypertext

: 한 문서에서 다른 문서로 즉시 접근 가능한 하이퍼링크 텍스트

 

Markup Language

: 문서나 데이터의 구조를 명시하기 위한 규칙을 정의한 언어의 일종

 


Html의 기본 구조

<!DOCTYPE html>

<html>
     <head>
    	<title></title>
        .
        .
    </head>
    <body>
    	.
        .
    </body>
</html>

 

<!DOCTYLE Html>

: 문서가 작성된 버전을 알리는 선언문

html 태그는 아님

 

<html>

: 문서의 정보와 내용이 시작되고 끝남을 표시

 

<head>

: 문서의 메타데이터 정의

 

<title>

: 문서의 제목, head태그 안에 사용

웹브라우저 탭에 표시되는 페이지의 이름

 

<body>

: 문서의 내용

실제 브라우저에 표시되는 내용

 


모든 태그는 <,> 꺽쇠 괄호로 표기

대부분의 태그는 <시작>과 </종료>태그 한쌍으로 구성

단일로 사용되는 태그도 있음 (ex. <br>)

 

 

 

tap: 태그 입력 전 간격조정

 

...visual studio code 사용중...

'노트정리 > HTML' 카테고리의 다른 글

HTML 텍스트 태그  (0) 2022.08.07
HTML 요소  (0) 2022.08.06

일러스트레이터 Polygonal Art - 영화『 Hacksaw Ridge 』포스터

 

 

1. Polygon으로 표현할 부분을 정해서 작업하기

2. 기타 배경 합성 작업

 


※ 모작

 

Polygonal Art

제가 한 방식은 따라 그릴 사진을 아래 깔고 레이어를 새로 만들어서 작업했어요. 아래 레이어는 템플릿으로 변경한 후 오브젝트 잡을 때 움직이지 않도록 했습니다.

 

Polygon은 삼각형으로 했어요! 펜툴로 하나하나씩 땄답니다.... 노가다죠.

이미지에서는 잘 보이도록 Stroke를 줘서 검은 선이 보이지만 실제로는 Stroke 없습니다! 메인이 되는 오브젝트가 사람이고 주변에 시체와 총, 상자도 작업해줬어요.

 

 

 

그리고... 굉장히 저에게 유감스럽게도 배경 합성 작업 파일이 사라졌습니다..... 그래서 바로 완성본 올릴게요ㅠㅠㅠ


모작
조금의 각색....

 

일러스트레이터 간단 포스터 아트웍

 

 

1. 배경 오브젝트 만들기

2. 제목 텍스트 배치

3. 메인 오브젝트 배치

4. 기타 텍스트 작업

 


포스터에 가장 기본으로 들어갈 색상 세 가지예요.

 

가장 아래는 Rectangle에 Gradient로 색을 줬어요. 그리고 그 위에 좀 더 작은 하얀색 Rectangle을 만들어줍니다. 

 

고리 모양의 오브젝트를 만들어서 흰색 Rectangle 아래로 배치해줄 거예요.

 

  1. Elipse 하나 생성

  2. Ctrl+C, Ctrl+F 해서 위에 하나 더 만든 후 사이즈를 줄인다.

  3. Pathfinder > Minus Front

  4. 고리 모양에 Gradient로 Fill 주기

  5. Effect > Gaussian Blur

여러 개 만든 다음 색상과 크기를 다르게 해서 배치했습니다. 가장 아래의 Rectangle 안에만 보이도록 하고 싶으면 Clipping Mask를 해줘도 좋아요.

 

제목이 될 텍스트를 만들어 줄 거예요.

제목은 대충 ILLUSTRATOR라고 적었고 두꺼운 고딕체로 했어요. 원하는 모양대로 Text를 변형하는 기능을 써볼 거예요.

 

  1. 텍스트 입력

  2. 원하는 모양대로 오브젝트를 하나 만듭니다. 저는 펜툴로 윗변은 직선인 아치형으로 만들어줬네요.

  3. 텍스트와 오브젝트를 잡고 Ctrl+Shift+[해서 가장 아래로 내립니다.

  4. 텍스트를 오브젝트 바로 아래 순서로 위치해주세요.

  5. Object > Envelope Distort > Make with Top Object

그 아래 작은 글씨로 하나 더 적어줬어요.

 

메인 오브젝트를 만들건데....

 

  1. Elipse 생성

  2. Elipse 위쪽으로 튀어나오는 것처럼 보이도록 펜툴로 그려주기

  3. Radial, Linear Gradient로 Fill

  4. Effect > Stylize > Drop Shadow로 겹겹이 층져있는 것처럼 효과

  5. Elipse를 Ctrl+C > Ctrl+F > Ctrl+Shift+] 해서 가장 위로 복사해줍니다.

  6. 펜툴로 그려준 오브젝트랑 가장 위에 있는 Elipse 잡고 Clipping Mask (Ctrl+7) 해줄게요.

  7. 가장 아래 Elipse를 다시 복사해서 크기를 줄이고 다른 색으로 바꿔줍니다.

  8. 하얀색 작은 원을 심볼로 등록해서 Symbol Sprayer Tool로 뿌려줘요.

1-6                                                                                                   7-8

 

오브젝트 주변으로 기타 텍스트 작업을 할 거예요.

 

동그랗게 돌아가는 형태로 해줄 거라서 Type on a Path Tool을 사용할 겁니다. 오브젝트와 중심을 같게 하는 Elipse를 만들어서 Type on a Path Tool로 패스를 잡고 타이핑을 해줍니다. 저는 양쪽으로 두 개 했어요. 그리고 Stroke만 있는 동심원을 하나 더 만들어서 Pathfinder로 잘라서 선을 만들고,  끝에는 마름모 모양으로 마무리했습니다.

 


기타 장식 달아주고 마무리!

+ Recent posts