PHP 기본 학습 노트(1)

양식이란 무엇인가요? - 양식은 테이블이 아닙니다.

사용자가 특정 데이터나 정보 또는 옵션을 제공할 수 있는 일부 HTML 요소입니다. 양식에는 일반적으로 데이터 처리를 위해 서버의 프로그램에 이 데이터/정보/옵션을 제공할 수 있는 "제출" 버튼이 있습니다.

——폼의 핵심은 데이터입니다.

양식 태그의 구성 및 형태:

첫 번째 양식 항목

두 번째 양식 항목

. . . . . . .

양식 항목이란 무엇인가요?

한 줄 텍스트 상자:

기타 속성:

값: 초기 텍스트 설정

크기: 입력 상자의 너비를 설정합니다(단위는 "문자 너비"). 이 숫자만큼의 문자를 입력할 수 있습니다.

maxlength: 이 입력 상자에 입력할 수 있는 최대 문자 수를 설정합니다

읽기 전용: "읽기 전용"을 의미하는 "값 없음" 속성입니다. 쓰기 방법은 다음과 같습니다. readonly="readonly"

disable: 입력 상자를 "invalid"로 설정합니다. 즉, 데이터가 유효하지 않습니다.

비밀번호 상자: <입력 유형=”비밀번호” 이름=”n2” />

기타 속성:

값: 초기 텍스트 설정

크기: 입력 상자의 너비를 설정합니다(단위는 "문자 너비"). 이 숫자만큼의 문자를 입력할 수 있습니다.

maxlength: 이 입력 상자에 입력할 수 있는 최대 문자 수를 설정합니다

단일 옵션: <입력 유형=”라디오” 이름=”n3” 값=”특정 값” />

                                                                                                           ~에

기타 속성:

        선택됨: 해당 옵션이 기본적으로 선택되어 있음을 나타냅니다. 또한 "가치가 없는 속성"이기도 합니다

이름에 대한 특별 지침: 단일 옵션 그룹에서는 이름 값이 동일해야 합니다.

다양한 옵션: <입력 유형=”체크박스” 이름=”n4” 값=”특정 값” />

설명: 여러 옵션에는 일반적으로 값이 있어야 합니다.

기타 속성:

        선택됨: 해당 옵션이 기본적으로 선택되어 있음을 나타냅니다. 또한 "무가치한 속성"이기도 합니다

제출 버튼: <입력 유형=”제출” 이름=”n5” 값=”텍스트 제출” />

설명: 제출 버튼을 클릭하면 양식이 "제출"됩니다. 즉, 데이터가 양식 양식에 설정된 파일로 전달됩니다.

이미지 버튼: <입력 유형=”이미지” 이름=”n6” src=”이미지 주소” />

설명: 사진 버튼의 기능은 실제로 "제출"이지만, 표시되는 효과는 사진입니다. 이는 페이지를 아름답게 만드는 데 도움이 됩니다.

재설정 버튼: <입력 유형=”재설정” 이름=”n7” 값=”텍스트 재설정” />

설명 : 양식의 모든 사용자가 초기 상태로 채우거나 선택하게 될 데이터

일반 버튼: <입력 유형=”버튼” 이름=”n8” 값=”텍스트” />

설명: 양식에는 아무런 영향이 없지만 다른 요구 사항(JS 프로그램)을 달성하기 위해 양식에서 "작업"이 생성될 수 있습니다.

파일 필드: <입력 유형=”파일” 이름=”n9” />

설명: 사용자는 로컬 파일을 선택하고 이를 서버로 보낼 수 있습니다. 파일도 데이터입니다.

숨겨진 필드: <입력 유형=”숨겨진” 이름=”n10” />

설명: 인터페이스는 표시되지 않지만 "숨겨진 데이터" -s 프로그램으로 서버에 제출됩니다.

드롭다운 선택: 이를 수행하려면 선택 및 옵션 태그를 사용하세요. 하지만 이를 "양식 항목"으로 취급합니다.

                                                                                                             ~                           ​

                                                                                                            ~

& lt; 옵션 값 = "2" 선택 = "선택됨" & gt;

                                                                                                             ~

                                               

                                                                                             

설명:

selected 속성은 option 태그에 사용되어 select 요소의 기본 선택 항목을 나타낼 수 있습니다(기본적으로 첫 번째 항목이 선택됨).

select 요소가 "다중 선택"(즉, 기본적으로 하나만 선택할 수 있음)이 가능하도록 select 태그에 multiple 속성을 사용할 수 있습니다.

여러 줄 옵션(목록 옵션이라고도 함): 여러 줄 옵션은 실제로 드롭다운 선택의 "변형"일 뿐입니다. 크기 값을 다음보다 크거나 같게 설정하면 여러 줄이 생성됩니다.

                                                                                                                             ​ 

                                                                                                             ~

                                                                                                             ~    에서 

                                                                                                             ~

                                                 

                                                                                             

여러 줄 텍스트 상자:

                                           <텍스트 영역 이름=”n13” 행=”행 수” cols=”열 수”>

설명:

행별로 설정한 행 수는 여러 줄 텍스트 상자에 표시할 수 있는 텍스트 줄 수를 나타내는 숫자입니다.

cols에서 설정한 열 수는 숫자로 여러 줄 텍스트 상자에 표시할 수 있는 텍스트 줄 수를 나타냅니다.

이 태그에는 값 속성이 없습니다. 그러나 실제 "값"은 이 태그 중간에 있는 모든 것입니다.

참고: 모든 양식 항목에는 "이름"을 나타내는 이름 속성이 있어야 합니다. 서버는 이 이름을 기반으로 데이터를 검색합니다.

프레임 태그

첫 번째 개념: 열려 있는 "창"에는 항상 하나의 웹 페이지만 표시됩니다.

그러나:

실제로는 하나의 창에서 여러 웹 페이지를 열 수 있습니다. 사실 핵심은 하나의 창에 하나의 웹 페이지가 표시된다는 것입니다. 그러나 특정 태그(프레임 세트)를 사용하여 "큰 창"을 여러 개의 "작은 창"으로 나눕니다. ".

우선 분명히 말씀드리자면

1, 프레임 태그(frameset) 사용 시 body 태그를 사용할 수 없습니다. 즉, body 태그는

대신 프레임셋 태그를 사용합니다.

2. 프레임셋 태그를 사용할 경우 프레임셋 문서 유형을 사용해야 합니다

구체적인 분할 코드는 다음과 같습니다.

& lt; Frameset Cols = "열에 따라 현재 창 설정" 행 = "행에 따라 현재 창 설정" & gt;

& lt; 프레임 src = "URL을 통한 웹페이지 1" /& gt;

                                                                                                                                                                                     

                             . . . . . . . . . . . . .

                                                         

cols의 값은 (,)로 구분된 열 너비를 나타내는 연속 숫자 또는 백분율입니다. 여기서 "*" 기호는 "나머지"의 너비를 나타냅니다. 예:

cols="100,800" : 큰 창을 열 단위로 두 개의 작은 창으로 나누는 것을 의미합니다. 첫 번째 창은 너비가 100이고 두 번째 창은 너비가 800입니다.

cols="100,200,*" : 큰 창을 열별로 3개의 작은 창으로 나누어 첫 번째는 너비 100, 두 번째는 너비 200, 나머지는 세 번째에 부여함을 나타냅니다.

cols=”15%, *”

행 값은 (,)로 구분된 행 너비를 나타내는 연속 숫자 또는 백분율입니다. 여기서 "*" 기호는 "나머지"의 너비를 나타냅니다. 예:

행=”100,200,*”

행=”20%, *”

참고: 프레임세트는 한 방향(열 또는 행)으로만 분할할 수 있습니다.

CSS 소개

CSS: 캐스케이딩 스타일 시트

CSS를 사용하면 다음 두 가지 측면에서 웹페이지의 모양을 제어할 수 있습니다.

1. 웹페이지의 모양을 일괄적으로 제어하여 노동력을 절약합니다.

2. 웹페이지의 모양을 픽셀 수준까지 정밀하게 제어합니다.

CSS의 기본 구문 형식:

선택기 { CSS 속성 이름 1: 값 1 CSS 속성 이름 2: 값 2 …… }

예:

글꼴{색상:빨간색; 글꼴 무게:굵게; 글꼴 크기:18px;}

dt{

글꼴 크기:14px;

글꼴 두께:굵게;

색상:분홍색;

}

두 가지 속성을 구별하기 위한 논증

html 속성: 태그에 속성 이름 = "속성 값" 형식으로 작성 - 이 따옴표는 생략 가능하지만 생략하지 않는 것이 좋습니다.

——'레이블 속성'이라고도 합니다.

——html 속성은 일반적으로 "일반적으로 다른 각 태그의 자체 속성"입니다.

——동일한 html 속성을 사용하는 태그가 거의 없습니다

 

css 속성: 선택기의 중괄호 안에 다음 형식으로 작성됩니다. 속성 이름: 속성 값 - 특별히 주의하세요. 값은 인용할 수 없습니다.

——'스타일 속성'이라고도 할 수 있습니다

——CSS 속성은 일반적으로 "모든 태그에 사용 가능"하며 일반적으로 동일합니다.

——동일한 CSS 속성을 사용하지 않는 태그는 거의 없습니다

선택기 카테고리

태그 선택기:

형식: 태그 이름 { …….. }

의미: 속성 설정이 적용되는 웹페이지의 모든 태그(해당)를 의미합니다.

클래스 선택기:

형식: .클래스 이름 { …… }

의미: 이 속성 설정은 웹 페이지의 클래스를 참조(해당)하고 값이 클래스 이름인 모든 태그에 적용됩니다.

예:

                                                                                                                                                                  ​ 

                                                                                                                                                                           에 

ID 선택기:

형식:                                                                                                                                                 

의미: 이 이름의 값을 가진 웹페이지의 ID를 참조(대응)하는 태그는 이 속성 설정을 적용합니다.

참고: 일반적으로 웹페이지의 ID 이름은 ID 자체가 "고유"를 의미하므로 동일해서는 안 됩니다.

예:

                                                                                                                                                                   ​ 

& lt; h1 ID = "d1" & gt;

범용 선택기:

형식: *{ … .. } ——유니버설 셀렉터에는 이 형식(기호)만 있습니다.

의미: 자동으로 "모든 태그"를 참조합니다. 즉, 모든 태그에 이 속성 설정이 적용됩니다.

참고: 범용 선택기는 일반적으로 텍스트 색상, 텍스트 크기, 패딩, 여백과 같은 몇 가지 기본 속성을 설정하는 데에만 사용됩니다.

의사 클래스 선택기:

형식: :의사 클래스 이름 {……}

참고: 실제로 시스템 내에서 규정되고 자체적으로 정의되지 않은 몇 가지 의사 클래스 이름만 있습니다(예: 링크, 방문, 호버, 활성). 일반적으로 위의 의사 클래스는 태그에만 사용되며 그 형식과 의미는 일반적으로 다음과 같습니다.

a:link{……} : 웹 페이지가 처음 열릴 때 링크 태그의 상태를 나타냅니다(초기 링크 상태)

         a:visited{…..}       ：表示一个a链接标签在点击（访问）过之后的时候的状态（访问后状态）

         a:hover{….}          ：表示一个a链接标签在鼠标放上去的时候的状态（悬停状态）

         a:active{….}         ：表示一个a链接标签在鼠标摁住但还没有抬起的状态（活动状态）。

不过，最新的浏览器中，出于安全考虑，a的hover和visited效果有些属性不能用了。

复合选择器之：层级选择器

         形式： 选择器1  选择器2 { ……… }

         含义： 在选择器1所对应的标签中由选择器2所对应的那些标签。。。。。其中，选择器1和选择器2可以是前面所学的任意某种选择器，而且这种层级关系还可以多层次，比如：

#d1  div{…}

.cc1  p  span{…..}

p  .cc2  img{…..}

#d1  p  a:hover{….}

         举例：

                  

                  

                           

段落1

                  

                                                                                                                                         

복합 선택자: 그룹 선택자

형태: 선택자 1, 선택자 2 { ……… }

의미: 두 선택기가 동일한 속성 설정을 사용한다는 의미입니다. 실제로 이는 단순화된 코드를 작성하는 방법에 지나지 않습니다. 그렇지 않으면 작성하려면 두 개의 선택기를 사용해야 합니다.

.a {색상:글꼴 크기:15px;}

.b{ 색상:빨간색; 글꼴 크기:15px;}

è

.a, .b{ 색상:빨간색; 글꼴 크기:15px;}

기타 복합 형태(예):

div.cc1{…} : div .cc1{…}과 완전히 다른 클래스 값 cc1을 갖는 div 태그를 나타냅니다.

p#d1{…} : id 값이 d1인 p 태그를 나타내지만 이 형식은 권장되지 않습니다(의미가 거의 없음).

프레임:

프레임 태그는 "현재 창"을 더 작은 창으로 나누는 데 사용되는 기술입니다. framseset은 body 태그를 대체하고 프레임 문서 유형을 사용합니다.

& lt; 프레임셋 행 = "분할" Cols = "열 너비 분할" & gt;

& lt; 프레임 src = "첫 번째 작은 창 URL의 웹 주소" border = "0" 스크롤링 = "no" /& gt;

                                                                                                             ~                                                    

                             . . . . . . .

                                                         

CSS의 기본 개념:

CSS는 웹 페이지의 특정(일부) 태그(요소)의 특정(일부) 특성을 특정(일부) 값으로 설정하는 목적으로 사용됩니다.

CSS의 기본 구문 패턴은 다음과 같습니다.

선택기 { CSS 속성 1: 값 1; CSS 속성 2: 값 2 ……… }

소위 선택자는 실제로 웹 페이지의 특정 태그에 매핑될 수 있는 문법 형식입니다.

css 선택기 분류:

태그 선택기:

영어 단어 {….}

소위 말하는 영어 단어는 실제로 존재해야 할 태그 이름입니다

클래스 선택자(class selector)

             . 수업 이름 {…}

& lt; p class = "클래스 이름 1" align = "center" & gt;

& lt; img src = "그림 경로" width = "100" class = "클래스 이름 2" /& gt;

                                                                                                            ~                            를 통해

ID 선택기:

                                                                                                           >                 

                                                                                                             ~                                                  마감

특별 참고 사항: 제목, 클래스, ID는 "보편적 속성"이라고 합니다. 즉, 누구나 사용할 수 있습니다.

범용 선택기:

                 *{….}

의사 클래스 선택자:

a:링크{…}

a:방문함{… }

a:hover{. . . }

a:활성{….}

참고: 위의 4개 의사 클래스는 태그에 사용될 때 일반적으로 위의 순서로 작성되어야 합니다.

또한 실제 적용에서는 다음과 같이 단순화되는 경우가 많습니다.

아{………}

a:hover{….}

의미는 연결 레이블이 "마우스를 얹은 상태"와 "기타 상태"로만 구분된다는 것입니다.

레벨 선택기:

선택자 1 선택자 2{. . . . . ｝

그룹 선택기:

선택자 1, 선택자 2{. . . . . ｝

텍스트 단락의 스타일 속성

색상: 라벨의 텍스트 색상을 설정합니다. 색상 값은 영어 단어, 16진수 구문 및 rgb 구문을 사용할 수 있습니다.

색상: 빨간색; 색상: #f0fcf8; 색상: rgb(123, 88, 205);

font-size: 텍스트 크기를 일반적으로 픽셀(px) 단위로 설정합니다. 일반 상업용 웹사이트의 텍스트 크기는 일반적으로 12px입니다.

font-weight: 텍스트를 굵게(bold) 또는 굵게(normal)로 설정합니다.

font-style: 텍스트를 이탤릭체(italic) 또는 이탤릭체가 아닌(normal)로 설정합니다.

font-family: 텍스트의 글꼴 이름을 설정합니다. 쉼표로 구분하여 여러 글꼴 이름을 사용할 수 있습니다. 의미: 사용자의 컴퓨터에 첫 번째 글꼴이 없으면 세 번째 글꼴을 사용합니다. 글꼴 이름 2개 등입니다. 예:

글꼴 모음: 송 왕조, 모방 송 왕조, Microsoft Yahei, arial, “Times New roman”;

line-height: 텍스트의 줄 높이를 설정합니다. 단위는 일반적으로 텍스트 줄이 차지하는 공간의 높이인 px입니다. 줄 높이는 텍스트의 높이가 아닙니다.

letter-spacing: 문자(또는 문자) 사이의 간격을 설정합니다. 중국어는 실제로 "단어"의 간격입니다.

단어 간격: 단어 사이의 간격을 설정합니다. 일반적으로 서부 라틴 문자에만 유효합니다.

text-align: 텍스트의 가로 정렬을 설정합니다. 해당 기능은 label 속성의 align 속성과 동일합니다. 하지만 참고하세요: html 속성인 align은 실제로 특정 태그에서만 사용되지만 text-align은 거의 모든 태그에서 사용할 수 있습니다.

text-indent: 단락 첫 줄의 들여쓰기 거리를 설정합니다. 단위는 일반적으로 px입니다.

텍스트 장식: 텍스트의 "수정 줄" 설정: 밑줄, 줄 관통, 윗줄, 없음

vertical-align: 테이블 상자(셀)에서 텍스트의 수직 정렬을 설정합니다: 위쪽(상단 정렬), 중간(가운데 정렬), 아래쪽(하단 정렬)

예비 박스 모델

Box는 CSS에서 가장 중요한 개념입니다.

박스

먼저 개념을 정하세요. 거의 모든 라벨은 실제로는 상자입니다. 소위 상자는 '직사각형 영역'에 지나지 않습니다. 사실 소위 웹페이지는 상자 속의 상자에 지나지 않습니다.

상자는 다음 영역(구조)으로 구성됩니다.

테두리: 선형 영역으로 실선, 점선 또는 기타 모양이 될 수 있습니다.

여백(Margin): "테두리"라고도 하며, 경계선 밖의 빈 공간으로 "물체를 배치할 수 없음"을 의미합니다.

패딩(Padding): "패딩(padding)"이라고도 불리는 경계선 안의 빈 공간으로, "물체를 배치할 수 없음"을 의미하기도 합니다.

콘텐츠 영역(해당 CSS 속성 이름 없음): "객체"를 배치할 수 있는 상자 내 영역, 즉 상자의 주요 영역을 나타냅니다. 여기에 배치된 개체는 일반 텍스트나 다른 태그일 수 있습니다. 이전에 배운 HTML의 "콘텐츠 부분"에 해당합니다. 콘텐츠 영역은 일반적으로 너비 및 높이 속성(너비, 높이)만 설정할 수 있습니다.

상자의 다양한 구성 요소는 아래 그림과 같습니다.

웹디자인에서 말하는 '콘텐츠와 퍼포먼스의 분리' 개념

우리는 이전에 HTML에 대해 배웠으며 태그에는 "의미 표현" 기능이 있다고 말했습니다. 사실 콘텐츠와 성능이 뒤섞여 있다고도 볼 수 있다.

현재:

CSS 기술은 실제로 웹페이지의 각 태그의 성능을 "끌어내어" 특별한 위치(예: 스타일 태그)에 배치할 수 있으며, 나머지 부분(태그 및 텍스트 콘텐츠 등)은 집합적으로 "구조/내용"이라고 합니다. 이러한 접근 방식을 "콘텐츠와 성능의 분리 아이디어"라고 합니다

상자의 두 가지 초기 상태(기본 성능):

div와 유사한 상자: 상자는 내부 내용에 관계없이 자동으로 "한 줄을 차지합니다". 이것은 "블록 상자"(블록 요소)입니다. 일반적으로 사용되는 블록박스:

p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,

기능: 고정된 너비와 높이, 여백, 패딩을 설정할 수 있습니다.

스팬 상자와 유사: 상자의 콘텐츠는 유사한 상자와 함께 한 행에 표시됩니다. 행이 가득 차지 않으면 자연스럽게 다음 행으로 이동합니다. 이는 텍스트의 성능 특성과 유사합니다. : 인라인 상자(인라인 요소)입니다. 인라인 상자에는 일반적으로 텍스트 및 이미지와 같은 "최종 데이터 콘텐츠"가 들어 있습니다. 기타 인라인 상자:

b, 강한, 글꼴, i, u, a, img, 입력, 텍스트 영역, 선택,

특징: 너비와 높이는 설정할 수 없지만 내용에 따라 "지원"됩니다. 여백과 패딩에는 상한 및 하한 성능이 없습니다.

일반적으로 인라인 상자는 "작은 상자"이고 블록 상자는 "큰 상자"입니다.

예비 레이아웃(원칙)

소위 레이아웃은 실제로 웹 콘텐츠를 특정 방식으로 적절한 위치에 배치하는 것을 의미합니다.

기본 레이아웃 단계:

1. "현재 페이지"를 시각적으로 명확하게 여러 블록으로 나눕니다. 나누는 방법은 두 가지뿐입니다.

a) 상하 구조: 이때 박스 몇 개만 사용하면 다른 설정 없이 자연스럽게 상하 구조가 됩니다.

b) 왼쪽 및 오른쪽 구조: 이때 여러 상자가 사용되며 그에 따라 플로팅됩니다. 일반적인 모드:

1.                                                                                                                                                                                      를 통해
상자 3개: 왼쪽 2개와 오른쪽 1개 또는 오른쪽 2개와 왼쪽 1개 또는 측면 1개.
추가 상자: 일반적으로 단면입니다.

플로팅 설명:

떠 있는 것은 물 속의 거품과 같아서 "온라인으로 떠다닌다"

더 생생한 비유: 모든 사람(모든 태그)은 "지상에 타일로 배열되어" 각각 특정 영역을 차지하지만 부동 요소는 천장까지 "떠 있으며" 모든 사람의 일반적인 "지상 영역"을 차지하지 않습니다. .

다른 요소와 공간을 차지하지 않는 것 외에도 주요 특징(즉, 파괴 효과)은 실제로 상위 상자의 적절한 높이를 잃게 한다는 것입니다. 즉, 상위 상자는 더 이상 내부에 떠 있는 요소를 포함할 수 없습니다. 상자! 이는 기본적으로 레이아웃에서 허용되지 않습니다! 그런 다음 합리적인 포함을 달성하기 위해 보완적인 방법을 사용해야 합니다. 즉, 상위 상자가 하위 상자를 감싸는 것입니다. 상위 상자의 올바른 유효 높이를 얻는 방법에는 세 가지가 있습니다.

1. 상위 상자의 고정 높이를 설정합니다. 일반적으로 높이는 디자인 중에 알려져 있고 변경되지 않습니다.

2. 다음과 같이 상위 상자 끝에 부동 소수점을 지우기 위해 빈 상자를 추가합니다.

3, 상위 상자에 대한 CSS 속성 설정: Overflow:hidden;

가장 좋은 요약은 다음과 같습니다. 레이아웃을 왼쪽과 오른쪽으로 정렬해야 하고 왼쪽과 오른쪽 배열을 플로팅해야 하며 플로팅 효과를 수정해야 합니다. 상위 상자가 하위 상자를 합리적으로 감싸도록 해야 합니다.

위 내용은 관련 내용을 포함하여 기본적인 PHP 학습 노트(1)를 소개한 것입니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.