프로그래밍 학습 중의 필기용

2176 단어 CSSHTML메모지tech
이번에 나는 배운 것을 기록하고 싶다.

위조 텍스트 삽입


나는 HTML로 코드를 쓰고 싶을 때 위조 텍스트를 쓸 기회가 있다.
위조 텍스트를 간단하게 작성할 수 있는 방법을 소개한다.
1 위조 텍스트를 기입할 곳에 아래의 문자를 입력한다
3
lorem
"tab"또는 "return"키를 누릅니다.그런 다음 다음 다음 위조 텍스트가 표시됩니다.
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dolores at reiciendis ratione neque porro quia illo earum velit pariatur libero tempore rem et, aut suscipit dolore, delectus provident qui!

시간 태그


time 태그는 날짜, 시간을 나타내는 데 사용되는 HTML 태그입니다.
사용법은 간단하다. 탭에 표시할 날짜와 시간을 끼우기만 하면 됩니다.
4
<time>2022-5-6</time>
타임 라벨을 사용하는 장점은 검색엔진이 시간을 파악할 수 있다는 것이다.
검색 순위가 올라간다는 얘기다.

CSS 디자인의 노하우[BEM]


최소 모듈(버튼, 제목 등)을 만들 때
믹스가 만든 요소를 스타일링하면 인코딩하는 시간이 수월해진다.
왜냐면 사용할 때 스타일링을 지울 시간이 없기 때문이다.
전제로서 최소 모듈은 사이트 전체가 사용하는 요소이다.
예를 들어, 버튼의 경우
<a href="#" class="btn">
  ボタン
</a>
.btn{
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 10px 0;
  color: #000;
  text-align: center;
  margin-right: 30px;   //スタイリング要素
  margin-bottom: 10px;    //スタイリング要素
}
btn 클래스에margin이 부여되었습니다.
만약 다른 곳에서 btn류를 사용한다면
아마도 Margin의 간섭으로 제거된 CSS를 쓸 필요가 있을 것이다.
해결 방법[예: 배경이 파란색 버튼을 만들고 싶을 때]
<a href="#" class="btn btn__blue">        <!-- .btn__blueを追加 -->
  ボタン
</a>
.btn{
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 10px 0;
  color: #000;
  text-align: center;
}
.btn__blue{
  margin-right: 30px;          //スタイリング要素
  margin-bottom: 10px;           //スタイリング要素
  background-color: #0000ff;    //背景を青
}
코드 해설
  • .btn을 혼합하다.btn__블루를 생성합니다
  • .btn__블루는 margin-right·margin-bottom 등의 스타일링을 매치했다
  • 총결산하다
    • 버튼 요소를 형성합니다.btn 데이텀을 생성합니다.
    • 스타일, 배경, 문자 색을 바꾸는 버튼 요소를 만들려면 믹스를 사용하십시오.
    • 와이파이 요소에 대한 조형
    이렇게 하면 다른 곳에서 간단하게 사용할 수 있다.

    좋은 웹페이지 즐겨찾기