HTML、CSSを学習し、理解していないことや新しい知識を記録する

CSS

色と背景のスタイル

Webに色を表示🎨

✔ 16진수 표기법
	#ffff00 처럼 # 기호 다음에 6자리의 16진수로 표시하는 것으로 가장 기본적인 방법
✔ rgb와 rgba 표기법
	차례대로 빨간색과 초록색, 파란색의 양을 나타내는데 십진수로 표현
	rgb(red, green, blue), rgba(red, grren, blue, alpha) α: 불투명도값
✔ hsl과 hsla 표기법
	hue(색상), saturation(채도), ightness(밝기)
✔ 색상 이름 표기법
	red나 yellow, black처럼 잘 알려진 색상 이름으로 표시

📌 カラー抽出サイト

背景色と背景画像

✔ background-color - 배경 색 지정하기 (상속 ❌)
✔ background-clip - 배경 적용 범위 조절하기
	border-box | padding-box | content-box
✔ background-image - 웹 요소에 배경 이미지 넣기
✔ background-repeat - 배경 이미지 반복 방법 지정하기
✔ background-size - 배경 이미지 크기 조절하기
	auto | contain | cover | <크기 값> | <백분율>
✔ background-position - 배경 이미지 위치 조절하기
	<수평 위치> <수직 위치>

	💡 버튼 배경 이미지 위치 지정하기
	<style>
	#bg1 {
 	   background-image: url('images/light.png');
 	   background-repeat: no-repeat;
  	  background-position: right center; }
	</style>
	<div>
	    ...	
	    <button id="bg1">IDEA</button>
	</div>

✔ bacground-origin - 배경 이미지 배치할 기준 조절하기
	border-box | padding-box | content-box
✔ background-attachment - 배경 이미지 고정하기
	scroll(default) | fixed
✔ background - 속성 하나로 배경 이미지 제어하기
	background: [-color] [-image] [-repeat] [-attachment] [-position];

グラデーション効果を背景に

グラデーションとブラウザのプレフィックス

標準化された構文に加えて、グラデーションをサポートしないブラウザと接頭辞を使用するブラウザも考慮されます.

<style>
    .grad {
        background: blue; /* 그러데이션을 지원하지 않는 브라우저용 */
        background: -webkit-linear-gradient(left, top, blue, white);
        background: -moz-linear-gradient(right bottom, blue, white)
        background: -o-linear-gradient(right bottom, blue, white);
        background: linear-gradient(to right bottom, blue, white) /* 표준 구문 */
    }
</style>

せんけいランプ

色は、垂直方向、水平方向、または対角線方向に一定に保たれます.どの方向に変えて、どんな色に変えるか教えてください.linear-gradient( <각도> to <방향>, color-stop, [color-stop, ..]) ;

✔ 방향
    to top	아래에서 시작해 위로
    to left 	오른쪽에서 시작해 왼쪽
    to right	왼쪽에서 시작해 오른쪽
    to bottom 	위에서 시작해 아래

✔ 각도
    'deg'로 표기. 맨 윗부분이 0deg에서 시계 방향 회전

✔ 색상 중지점
    바뀌는 지점을 색상 중지 점(color-stop)
    색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있음

えんけいランプ

radial-gradient( <최종 모양> <크기> at <위치>, color-stop, [color-stop...])

✔ 모양
    circle(원형)과 ellipse(타원형)-dafault
✔ 위치
    원의 중심을 지정
✔ 크기 (그러데이션 가장자리가 그러데이션 중심에서 ...)
    closest-side - 가장 가까운 모서리와 만날 때까지
    closest-corner - 가장 가까운 꼭짓점에 닿을 때까지
    farthest-side - 그가장 먼 모서리와 만날 때까지
    farthest-cornet - 가장 먼 코너에 닿을 때까지(default)
✔ 색상 중지 점(color-stop)
    색상이 바뀌는 부분
    background: radial-gradient(red, yellow 20%, skyblue);
    중앙에서 시작해 빨간색-노란색-하늘색으로 끝나는 그러데이션
✔ 그러데이션 반복
    repeating-radical-gradient

HTMLを使用したマーケティングメールの作成
マーケティング方法の1つである「メール」.でも.画像、テキスト、ビデオなどの複数のドキュメントをメールドキュメントに入れ、Webドキュメントのように整理するのは容易ではありません.制限もたくさんあるので.
だから.
◾HTML 5を使用すると華やかなダイナミックページを作成できますが、メールドキュメントには多くの制限がありますので、HTML 4の基準に従って作成することが望ましいです.
◾メールの場合、レイアウトの作成時にテーブルを使用します.
◾Webサーバに画像をアップロードし、アドレスを取得する
◾スタイル情報を行内スタイルとして適用する
◾最小限の機能のみを使用し、コアコンテンツのみを伝達
imgをアップロードしていません...右クリックして新しいウィンドウを開くと、画像が表示されます.💢 どうしてそうなの

CSSボックス型番

ブロックレベル要素と行内要素

✔ブロックレベル(block-level)🔲 要素
タグを使用してエレメントを挿入するときに1行だけを占有するエレメント(幅100%)
幅、余白、塗りつぶしを使用して寸法または位置を指定するには、ブロックレベル要素を使用します.
✔行内級◻◻元素
画面に表示されるコンテンツのみを占有し、残りのスペースには他の要素がある可能性があります.

ボックスタイプ

ブロックレベルの要素はすべてボックスです
実際のコンテンツ領域、ボックスとコンテンツ領域の間の余白塗り、ボックスのボーダー、ボックスモデルの間の余白などの要素から構成されます.

✔ width, height - 콘텐츠 영역의 크기
    실제 콘텐츠 크기 계산할 때는 width + padding + border
    💥 인터넷 익스플로러 6에선 content width + padding + border
✔ display - 화면 배치 방법 결정하기
    none | content | block | inline | inline-block | table 등

枠線に関連する属性。

✔ border-style - 테두리 스타일 지정하기
    none | hidden | dashed | dotted | solid | double 등
✔ border-width - 테두리 두께 지정하기
✔ border-color - 테두리 색상 지정하기
✔ border - 테두리 묶어 지정하기
    border: [-width] [-style] [-color];
✔ border-radius - 박스 모서리 둥글게 만들기 (왼쪽 위에서 시계방향)
    border-radius: <가로> <세로> (타원)
✔ box-shadow - 선택하 요소에 그림자 효과 내기

余白のプロパティを調整します。

✔ margin - 요소 주변 여백 설정하기
    top ➡ right ➡ bottom ➡ left
    마진 중첩(margin overlap) : 마진과 마진이 만날 때 큰 쪽으로 겹쳐지는 것 
    (오른쪽-왼쪽 마진은 중첩❌)
✔ padding - 콘텐츠 영역과 테두리 사이 여백 설정하기

CSSレイアウト

CSS位置決め

ブラウザ画面に各コンテンツ領域を配置する方法

✔ box-sizing - 박스 너비 기준 정하기
    content-box: 콘텐츠 영역 너비 값
    border-box: 박스 모델 전체 너비 값
✔ float - 왼쪽이나 오른쪽으로 배치하기
✔ clear - float 속성 해제하기
    float 속성을 이용해 배치하면 그 다음에 넣는 다른 요소들에도 똑같이 전달
    따라서 다음 요소에는 적용되지 않도록 해제 🔓
✔ position - 배치 방법 지정하기
    static	요소를 문서의 흐름에 맞추어 배치
    relative	이전 요소에 자연스럽게 연결해 배치하되 위치 지정 가능
    absolute	원하는 위치를 지정해 배치
    fixed	지정한 위치에 고정해 배치. 화면에서 요소가 잘릴 수도 있음
✔ visibility - 요소를 보이게 하거나 보이지 않게 하기
    visible	화면에 요소를 표시(default)
    hidden	화면에서 숨기기. 크기는 그대로 유지
    collapse	표의 행, 열, 행 그룸, 열 그룹 등에서 지정하면 서로 겹치도록 조절
✔ z-index - 요소 쌓는 순서 정하기
    z-index 값이 작을수록 아래, 클수록 위에 쌓인다.

複数セグメントに編集

✔ column-width - 단의 너비 고정하고 다단 구성하기
✔ column-count - 단의 개수 고정하고 다단 구성하기
✔ column-gap - 단과 단 사이 여백 지정하기
✔ column-rule - 구분선의 색상, 스타일, 너비 지정하기
✔ break-after - 다단 위치 지정하기
✔ column-span - 여러 단을 하나로 합치기

表スタイル

✔ caption-side - 표 제목 위치 정하기 top | bottom
✔ border - 표 테두리 스타일 결정하기
✔ border-collapse - 테두리 통합, 분리하기
✔ border-spacing - 인접한 셀 테두리 사이 거리 지정하기
✔ empty-cells - 빈 셀의 표시 여부 지정하기
✔ width, hieght - 표 너비와 높이 지정하기
✔ table-layout - 콘텐츠에 맞게 셀 너비 지정하기
   📌 영문 내용을 여백없이 길게 입력할 경우 모두 한 줄로 표시된다.
✔ text-align - 셀 안에서 수평 정렬하기
✔ vertical-align - 셀 안에서 수직 정렬하기
    baseline | top | bottom | middle | sub | super | text-top 등