담비의 개발블로그

국비지원교육 18일차(4주차) 본문

국비교육

국비지원교육 18일차(4주차)

담비12 2023. 12. 6. 17:29

오늘은 배운내용이 상당하다 ..와우

 

 

번외)
게임은 재밌는 게임이 인기가 많다. 
프로그램은 정답만 맞으면 된다.

모두 용량이 커야하고 좋은 코딩을 써야하고, 정갈한 코딩을 써야하는게 아니다.
for문을 써야하는 양이 적다면 그냥 바로 직접 써서 코딩하면 된다.

예를들어 구구단을 써야하는데
2*2=4
2*3=6
2*4=8
이렇게만 출력하면 된다면 for문보다 그냥 직접 쓰는게 빠르기 때문이다.

무엇이 효율적인지는 본인의 선택이다.

강사님이 이 이야기를 하게 된 이유에 대해 설명하면, 꼭 좋은 코드와 복잡한 코드를 써서 멋있게 표현해야한다는 강박에 빠지지 않기를 바라며 말씀해주셨다. 
번외끝)

 

 

아래 내용의 참고 사이트

https://poiemaweb.com/css3-selector

 

table관련 태그(thead, tbody, tfoot)

<thead>
</thead>

thead와 tbody, tfoot는 사용 하지 않아도 된다.

하지만 이 태그들을 사용하는 이유는 개발자가 코드를 읽을 때 알아보기 쉽기 때문이다.
상위 태그에 속성을 부여하는 경우 하위 태그까지 일괄적으로 적용 되기 때문에 각 개별 행,열 마다 속성을 부여하지 않아도 되는 편리함이 있다.

 

 

summary: 이 표가 어떤 표인지 요약하는 설명해줌
caption: 표의 제목
보통 보기에는 깔끔하지 않으니 안보이게 한다. 현재 둘 중에 하나는 쓰고 있다.

 

input안에 type과 name은 써두는게 좋다.
type은 어떤 내용의 상자인지 알 수 있고, name은 서버에 넘겨줄때 필요하다.

 

 

▶input에서 자주 쓰이는 태그

1. button
2. checkbox (on off 기능으로 해서 셀룰러 데이터 on off 하는 버튼처럼 만들 수 있다)
3. file
4. password
5. radio(select와 동일하지만 단하나만 선택하도록 유도/예를들어 참가 불참/name으로 그룹을 짓는다.)
6. text

 

▶select에서 option

value는 서버로 넘어간다.

<select name="subject">
      <option value="math" selected>수학</option>
      <option value="eng" disabled>영어</option>
</select>

 

▶textarea(여러줄을 받을 수 있다.)

<textarea name="message" rows="10" cols="30">
            담비
</textarea>

이렇게 쓰게되면 담비 앞에 공백이 그대로 화면에 나타난다.

 

 

selector(선택자)

 

 

 

▶selector[어트리뷰트=”값”]
<head>
  <style>
    a[target="_blank"] { color: red; }
  </style>
</head>
<body>
  <a href="http://www.poiemaweb.com">poiemaweb.com</a><br>
  <a href="http://www.google.com" target="_blank">google.com</a><br>
  <a href="http://www.naver.com" target="_top">naver.com</a>
</body>

a 요소 중에 target 어트리뷰트의 값이 "_blank"인 모든 요소

 

▶selector[어트리뷰트^=”값”]
a [href^="https://"] { color: red; }
a 요소 중에 href 어트리뷰트 값이 "https://"로 시작하는 요소로 쓰인다.

 

▶selector[어트리뷰트~=”값”]
<head>
  <style>
    h1[title~="first"] { color: red; }
  </style>
</head>
<body>
  <h1 title="heading first">Heading first</h1>
  <h1 title="heading-first">Heading-first</h1>
  <h1 title="heading second">Heading second</h1>
  <h1 title="heading third">Heading third</h1>
</body>
h1 요소 중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소

 

▶selector[어트리뷰트$=”값”]
<head>
  <style>   
    a[href$=".html"] { color: red; }
  </style>
</head>
<body>
  <a href="test.html">test.html</a><br>
  <a href="test.jsp">test.jsp</a>
</body>

 a 요소 중에 href 어트리뷰트 값이 ".html"로 끝나는 요소

 

▶후손 셀렉터(Descendant Combinator)

 

div아래에 있는 span아래에 있는 P가 후손요소이다.

 

 

 

▶자식 셀렉터

div아래에 있는 span이 자식 요소이다. 

 

 

 

▶hover/focus  


hover는 마우스가 올라와 있을 때 
focus는 포커스가 들어와 있을 때

 

 

▶ checked/enabled /disabled 

input 태그의 type요소가 "checkbox"이거나 "radio"일때 사용이 가능하다.
(배우는 단계여서 더 가능한지는 모르겠다.)

 

style에 들어감

 

 

이런식으로 생성이 된다.

enabled는 사용 가능한 상태여서 blue색이 표현된다.
disabled은 사용 불가능한 체크박스로 두기 위해 grey색과 중간에 선을 넣어주었다.
checked는 셀렉터가 체크 상태일 때 red색을 입혀줄 수 있다.

흐림에 checked 넣어줘서 자동으로 흐림으로 가게끔 되어 있는 것이다.

 

 

 

 

 

박스모델


margin: 테두리 바깥에 위치하는 외부 여백 영역
border: 테두리
padding: 테두리 안쪽의 여백 영역
content: 텍스트나 이미지 등이 해당 영역에 위치

 

 

▶border-radius
테두리를 둥글게 표현하도록 지정한다. px,em,% 단위를 사용한다.
border-radius:0 10px 10px 10px;
처음부터 왼쪽위 오른쪽위 왼쪽아래 오른쪽아래다.

 

 

 

display

 

너무너무 중요하다고 했던 별표 백만개의 display 이다.

 

▶block

 

오른쪽 검정 박스: div 영역이기 때문에 옆으로 배치가 되지않고 qwer은 아래로 내려간다.

 


항상 새로운 라인에서 시작하고, 화면 크기 전체의 가로폭을 차지한다. (width: 100%)
width, height, margin, padding 프로퍼티 지정이 가능하다.

 

 

 

▶inline

새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있고, content의 너비만큼 가로폭을 차지한다.
width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다.

 

 

▶inline-block

block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

 

 

 

▶기타
<a href="tel:01024067051">민수</a>
이렇게 하게 되면 핸드폰으로 접속했을 때 전화를 바로 걸 수 있게 한다.

고전적인걸로는 메일도 있다.
<a href="mailto:study@gmail.com">민수</a>

 

 

 

'국비교육' 카테고리의 다른 글

국비지원교육 20일차(4주차)  (1) 2023.12.08
국비지원교육 19일차(4주차)  (0) 2023.12.07
국비지원교육 17일차(4주차)  (2) 2023.12.05
국비지원교육 16일차(4주차)  (1) 2023.12.04
국비지원교육 15일차  (1) 2023.12.04
'국비교육' Related Articles more