HTML
문장 요소
h1~h6(제목), hr(가로선), p(문단), br(줄바꿈), strong(굵은 글씨), ins(이탈릭체), em(밑줄), pre(기본 서식 적용) 등이 있다. pre 태그의 경우 일반적으로 html5에서 두 개 이상의 공백을 인식하지 못하는 것과 달리, 태그 안의 문자를 있는 그대로, 즉 2개 이상의 공백 또한 그대로 출력한다. 또한, 기본적으로 출력되는 스타일이 아니라, pre 태그의 스타일이 적용되어 굴림체로 보인다. pre 태그를 제외한 html5에서 2개 이상의 공백을 표현하려면 (공백 한 칸)를 사용한다.
시멘틱 요소
https://www.w3schools.com/html/html5_semantic_elements.asp
시멘틱 요소는 웹 페이지의 부분을 구역을 나누는 태그로, 대표적으로 div, header, nav, article, section, figure, footer 등이 있다.
목록 요소
목록은 순서형 목록인 ol, 비순서형 목록인 ul, 나열형 목록인 d1이 있다. ol과 ul은 자식으로 li 태그를 가지며, ol은 1~n까지의 번호로, ul은 기호로 시작하게 된다. 나열형 목록의 경우 주로 그룹식으로 열거하기 위해 사용하고, 그룹 이름인 dt와 데이터 dd를 자식으로 가진다.
하이퍼링크 요소
하이퍼링크 요소는 link와 a가 있다. link는 head 태그 내에서 stylesheet를 가져올 때 주로 사용하고, 엄밀히 말하자면 연결해주는 것이 아니라 외부 자원을 가져오는 것이라 하이퍼링크와는 다르다. a의 경우 인라인 아이디(#), 내부 문서, 외부 사이트를 열 뿐만 아니라, matilto(메일), tel(전화), sms(문자), 사이트&query 등으로 연결해주기도 한다. a 태그로 연결할 때 기본적으로는 그 창에서 변화하지만, target="_blank"라는 attribute를 사용하여, 새 창에서 열리게끔 설정할 수 있다.
미디어 태그
<!-- 이미지 -->
<img src="./경로 alt="대체 텍스트(이미지가 안 보일 때)">
<!-- 오디오 -->
<audio src="./오디오의 경로" autoplay muted controls>
<source src="./오디오의 경로" type="audio/MIME_타입">
<source src="./오디오의 경로2" type="audio/MIME_타입2">
</audio>
<!-- 비디오 -->
<video src="./비디오 경로" width="넓이" height="높이" controls poster="./썸네일_경로">
<source src="./비디오의 경로" type="video/MIME_타입">
<source src="./비디오의 경로2" type="video/MIME_타입2">
</video>
<!-- iframe -->
<iframe src="url" frameborder="0"></iframe>미디어 태그에는 이미지 태그, 오디오 태그, 비디오 태그가 있다.
- 이미지 태그의 속성에는 src, alt가 있다. alt의 경우 이미지에 문제가 생기거나 시각장애인이 음성 서비스를 사용할 때, 이미지를 설명해주는 대체 텍스트이다.
- 오디오 태그의 속성에는 src, autoplay, muted, controls 등이 있다. autoplay는 자동으로 플레이 되게끔 하지만, 이 경우에는 muted 음소거하여 사용자가 갑작스러운 소리에 놀라지 않도록 하는 것이 좋다. controls는 오디오의 플레이어를 보여주어 사용자가 직접 재생 및 일시정지, 볼륨 조절 등을 할 수 있게 해준다.
- 비디오 태그의 속성에는 src, width, height, controls, poster, loop 등이 있다. width는 비디오의 넓이를, height는 비디오의 높이를 지정해준다. controls의 경우 오디오와 마찬가지로 사용자가 비디오의 재생과 관련하여 제어할 수 있도록 해준다. poster의 경우 유튜브의 썸네일이라고 생각하면 된다. 재생을 누르면 썸네일이 사라진다. loop의 경우 자동으로 반복재생되도록 해준다.
한 가지 유의해야할 점이 오디오 태그와 비디오 태그는 브라우저별로 호환 여부가 갈린다는 점이다. 따라서 태그 안에 source 태그를 달아, 파일을 여러 형식으로 지원해주어야 한다. 또한 source 태그 속성으로 type에 MIME 타입을 지정해주어야 한다. 아래의 블로그에서 브라우저 별 호환 정보를 확인할 수 있다.
blind513.tistory.com
각 미디오 태그의 대표적인 MIME 타입은 다음과 같다.
- 오디오의 MIME 타입은 mp3, ogg, x-wva 등이 있다. 각각 확장자가 ".mp3", ".ogg", ".wav" 인 파일에 대한 타입이다.
- ".wav" 파일의 경우 type="audio/x-wav"임에 주의하자
- 비디오의 MIME 타입은 mp4, webm, ogg 등이 있다. 각각 확장자가 ".mp4", ".webm", ".ogv"인 파일에 대한 타입이다.
- ".ogv" 파일의 경우 type="video/ogg"임에 주의하자
아래는 MIME 타입의 전체 목록이다.
https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
테이블 요소
테이블 요소에는 크게 table(테이블 선언), caption(테이블에 대한 설명), thead(테이블의 제목 행), tbody(테이블의 데이터), tfoot(테이블에 대한 통계) 등이 있다. table과 tbody는 필수 요소로 생략할 수 없다. thead, tbody, tfoot에는 tr(행)와 그 자식으로 th(제목), td(데이터)가 들어갈 수 있다. 열을 합치려면 td에 colspan="n"이라는 attribute를 사용하여, n개의 열을 합칠 수 있다.
폼 관련 요소
일반적으로 폼은 회원가입 등에 사용되는 요소로 클라이언트와 서버 간의 통신이 필요하다. 따라서 form 태그는 action=".jsp"과 method="post"를 attribute로 갖는다. 각각 form에 입력된 내용을 받는 jsp파일과 그 송신 방법을 의미한다. 기본적으로 method는 get 방식인데 이는 쿼리스트링으로 입력된 내용이 노출되므로 사용에 유의해야 한다.
- 폼의 자식 태그로는 fieldset과 label, input, select, textarea 등이 올 수 있다. 먼저 fieldset은 폼에서 연관된 요소들을 묶어주는 태그이다. 자식으로 legend(fieldset의 이름)과 다른 폼 요소를 가질 수 있다. label의 경우 말 그래도 이름표의 역할을 하는 태그로, input 등의 다른 폼 요소 앞에 붙는다. label의 for="#"라는 attribute를 사용하면 라벨을 클릭했을 때 해당요소로 포커스를 맞출 수 있다.
- input은 type의 attribute를 통해 다양하게 활용 가능하다. text(단문 입력), password(비밀번호 with * 표시), email(이메일), tel(전화번호), date(연월일 with 달력), checkbox(다중 체크 박스), radio(라디오 버튼, 단일 선택), file(파일 업로드), color(컬러 팔레트) 등을 사용할 수 있다. checkbox와 radio의 경우 checked라는 attribute를 부여해 기본적으로 선택되게끔 할 수도 있다. 또한, input 태그에 autofocus라는 attribute를 부여하면 첫 포커스를 지정할 수 있다(단, 페이지 당 하나의 autofocus만 가능). radio의 경우 단일 선택이므로 각 라디오 버튼의 input 태그의 id는 달라도 name이 같아야 한다.
- 한편 input의 attribute에는 submit(제출 버튼), reset(취소 버튼)이 있는데 이들은 button 태그에서도 동일한 attribute로 이에 한해 input과 button이 호환 가능하다.
- select 태그는 드롭다운 리스트로, option을 자식으로 갖는다. option 태그 내의 선택지와 달리, 실제로 송신되는 값은 value라는 attribute에 지정된 값이다. option 태그 또한 selected를 사용하여 기본 선택지를 지정할 수 있다.
textarea는 input의 text와 달리 장문의 텍스트 입력을 받는 태그이다. textarea의 크기는 cols와 rows로 정의할 수 있는데, 글자단위로 너비와 높이를 의미한다. 이 크기를 벗어난다고 해도 스크롤이 생겨 입력을 계속할 수 있다.
CSS
스타일 지정 방식
스타일은 3가지 방식으로 지정 가능하다. 먼저 인라인 스타일 방식은 해당 요소에 style 속성(attribute)로 직접 지정하므로 스타일 지정한다. 즉시 해당 스타일이 그 요소에만 지정되므로, 코드의 간결성, 재사용성, 변동성이 떨어져 가급적 사용 지양해야 한다. 두 번째로 내부 스타일 방식은 해당 문서의 태그 안 쪽에 style 태그로 지정하여 현재 문서에만 적용할 경우 활용한다. 재사용성은 현재 문서에만 적용되므로 중간 정도로 변경하기는 쉽다. 같은 선택자에 같은 속성을 줬을 때는 마지막에 준 속성이 부여된다. 마지막으로 외부 스타일 방식은 별도의 css 파일을 작성하여 해당 html 문서에 연결하여 사용하는 방식이다. 재사용성이 뛰어 나고, 필요한 곳에 link 태그를 활용하여 연결하고, 필요가 없는 경우 해당 link 태그를 삭제하면 된다. 반드시 문서 맨 앞에 @charset "UTF-8"로 처리해야 한글이나 특수문자가 손상되지 않는다.
스타일의 단위
크기 단위
스타일에서 콘텐츠나 요소의 크기를 지정할 때는 px, pt, %, em(rem), vh, vw 등을 사용한다. cm 등도 있지만 웹에서는 사용하지 않는다. 퍼센트는 글자가 아니라 부모의 상대적인 크기를 결정할 때 사용한다. 포인트는 인쇄에서 비롯된 것으로 문서의 글자 크기가 포인트 단위이다. px은 점 하나의 단위로 가장 많이 사용된. 보통 10포인트는 13픽셀 정도 된다. 그래픽 카드 해상도에 따라서 달리 보일 수 있다. vh(높이), vw(넓이)는 기기에 따라 달라진다(variable)는 의미이다. 스마트폰을 가로, 세로로 변형될 때 거기에 맞춰서 변화하는 것이 vh, vw을 적용한 것이다.
색상 단위
웹 컬러를 나타내는 방식으로 RGB 체계를 사용한다. 컬러명, 16진 코드 6자리(#ff0000), 16진 코드 3자리, hsl(색각도, 채도, 명도), hsla(색각도, 채도, 명도, 불투명도), rgb(빨, 초, 파), rgba(빨, 초, 파, 투명) 등으로 표현 가능하다. 색각도는 0~355, 채도는 0~100, 불투명도는 0~1, 빨초파는 0~255의 값을 가진다.
각도 단위
해당 요소를 회전하려고 할 경우 활용하며, deg(각도), turn(바퀴) 등으로 명시한다.
시간 단위
애니메이션이나 지연시간 등에 지정하며, 단위로써는 초(s), 밀리초(ms)를 사용한다. 더 작게는 micro(만분의 1), nano(10억분의 1)도 있다.
선택자
스타일을 부여할 대상을 지정하는 키워드로, 기본 선택자에는 *(모든 태그), .클래스명, #아이디명이 있다. 솔직히 이 블로그에 정리하기에는 양이 너무 많다. 그치만 일단 정리는 해보겠다. 일단 다음 링크는 전체 css 선택자이다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
| 선택자 | 설명 |
|---|---|
| * {style} | 모든 태그 선택 |
| 태그명 {style} | 해당 태그 선택 |
| .클래스명 {style} | 해당 클래스 선택 |
| #아이디명 {style} | 해당 아이디가 있는 태그 선택 |
| 조상 후손 {style} | 조상 요소에 포함된 모든 후손 요소를 선택함 |
| 부모>자식 | 부모 요소에 포함된 자식 요소만 선택함(손자는 선택되지 않음) |
| 형~제 | 형의 모든 아우 요소를 선택함 |
| 형+제 | 형의 첫 번째 아우 요소를 선택함 |
<style>
section p{border: 1px black solid;}
section>p{width: 50%;}
h1+p{color:red;}
h2+p{color:blue;}
h1~p{background-color: pink;}
</style>
...
<section>
<h1>H1</h1>
<p>p1</p>
<p>p2</p>
<div>
<p>p3</p>
<p>p4</p>
</div>
<h2>H2</h2>
<hr>
<p>p5</p>
</section>
| 의사 클래스(계층 선택자) | 설명 |
|---|---|
| 요소:first-child | 첫째이면서 해당 요소와 일치하는 요소(첫째가 아니라면 해당 안 됨) |
| 요소:first-of-type | 해당 요소 중에 가장 먼저 오는 요소(첫째가 아닐 수도 있음) |
| 요소:last-child | 막내이면서 해당 요소와 일치하는 요소 |
| 요소:last-of-type | 해당 요소 중에 가장 마지막에 오는 요소 |
| 요소:nth-child(N) | N째이면서 해당 요소와 일치하는 요소 |
| 요소:nth-of-type(N) | 해당 요소 중에 N째인 요소 |
| 요소:nth-child(2n) | 해당 요소 중에 짝수번째인 요소 |
| 요소:nth-child(2n+1) | 해당 요소 중에 홀수번째인 요소 |
| 요소:only-child | 독자인 해당 요소(형제 없음) |
| 요소:only-of-type | 다른 형제가 있더라도 형제 중 해당 요소는 하나인 요소 |
| 요소:empty | 해당 요소 중 비어있는 요소 |
<style>
li:first-of-type{color:red;}
li:first-child{background-color: pink;}
li:last-child{color:blue;}
li:last-of-type{background-color: aqua;}
li:nth-child(2){color:orange;}
li:nth-of-type(2){background-color: beige;}
li:nth-child(2n){border-bottom: 1px gray solid;}
li:nth-child(2n+1){border-bottom: 1px green dotted;}
li:only-child{background-color: lightgreen;}
p:only-of-type{background-color: lightcoral;}
h1:empty::before{content: "비어있음";}
</style>
...
<body>
<section>
<h1></h1>
<ul>ul1
<li>ul1_li1</li>
<li>ul1_li2</li>
<li>ul1_li3</li>
</ul>
<ol>ol
<li>ol_li1</li>
</ol>
<ul>ul2
<p>paragrpaph</p>
<li>ul2_li1</li>
<li>ul2_li2</li>
<li>ul2_li3</li>
</ul>
</section>
</body>
| 속성 선택자 | 설명 |
|---|---|
| [속성] | 속성이 있는 요소 |
| [속성=값] | 값이 완전히 일치하는 요소 |
| [속성~=값] | 값(단어, 하이픈 제외)이 포함된 요소 |
| [속성|=값] | 값과 일치하거나 "값-"으로 시작하는 요소 |
| [속성^=값] | 값으로 시작하는 요소 |
| [속성$=값] | 값으로 끝나는 요소 |
| [속성*=값] | 지정한 속성 값의 일부가 일치하는 요소 |
<style>
p[title]{border-bottom: 1px solid black;}
p[id="a"]{background-color: lightpink;}
p[id~="a"]{color: red;}
p[id|="bb"]{background-color: lightgoldenrodyellow;}
p[id^="bb"]{border-top: 2px dotted green;}
p[id$="cc"]{border-bottom: 2px dashed skyblue;}
p[id*="d"]{border-left: 2px solid blue;}
</style>
<body>
<p title="title">1 only title</p>
<p id="a">2 "a"</p>
<p id="a bb">3 "a bb"</p>
<p id="bb">4 "bb"</p>
<p id="bb- a-">5 "bb- a-"</p>
<p id="bb-a cc">6 "bb-a cc"</p>
<p id="cc">7 "cc"</p>
<p id="d-cc">8 "d-cc"</p>
<p id="abcde">9 "abcde"</p>
</body>
| 링크 선택자 | 설명 |
|---|---|
| :link | a 요소의 href 속성의 값이 있는 경우 |
| :visited | a 요소의 href에 방문했던 경우 |
| :target | a가 가리키는 대상에 스타일 적용 |
| --- | --- |
| 반응 선택자 | 설명 |
| :hover | 요소에 마우스 포인터가 올라감 |
| :active | 요소를 마우스로 누르고 있는 경우(활성화) |
| --- | --- |
| 전후 선택자 | 설명 |
| ::before | 특정 요소의 앞에 내용이나 스타일을 추가 |
| ::after | 특정 요소의 뒤에 내용이나 스타일을 추가 |
| ::selection | 마우스로 드래그해서 선택했을 때 스타일 추가 |
| --- | --- |
| 텍스트/문장 선택자 | 설명 |
| ::first-letter | 태그 안의 첫 번째 위치에 있는 글자를 선택(글자가 등 태그 뒤로, 두 번째 이상이면 X |
| ::first-line | 화면 상에서 첫 번째 줄을 선택(창 크기에 따라 달리 적용될 수 있다) |
| --- | --- |
| 기타 선택자 | 설명 |
| :not(조건) | 부정 선택자. 조건이 아닌 요소. |
| :checked | 라디오나 체크에서 선택되어 있는 요소 |
JAVA
자바는 솔직히 아직까지는 아는 내용만 배워서 굳이 정리하고 싶지는 않다. 환경설정, 변수, 연산자에 대해서 배웠다.
| 연산자 | 설명 |
|---|---|
| + | 더하기 |
| - | 빼기 |
| * | 곱하기 |
| / | 나누기. 이 경우 정확한 값이 나오는 게 아니라, 변수의 타입에 따라 값이 달라질 수 있음에 유의해야 한다. |
| % | 나머지 |
| --- | --- |
| a=b | a에 b의 값을 대입한다 |
| a+=b | a의 값에 b의 값을 더해 a에 대입한다. |
| a-=b | a의 값에 b의 값을 빼 a에 대입한다. |
| a*=b | a의 값에 b의 값을 곱하여 a에 대입한다. |
| a/=b | a의 값에 b의 값을 나누어 a에 대입한다. |
| --- | --- |
| a++ | a가 있고, a의 값에 1을 더한다 |
| ++b | b의 값에 1을 더한 b가 있다 |
| a-- | a가 있고, a의 값에 1을 뺀다 |
| b-- | b의 값에 1을 뺀 b가 있다 |
| --- | --- |
| \== | |
| != | |
| > | |
| >= | |
| < | |
| --- | --- |
| a&&b | and, a와 b 둘 다 참이면 참 |
| a||b | or, a와 b 둘 중 하나라도 참이라면 참 |
| a^b | xor, a와 b의 값이 다르면 참 |
| !a | not a, a의 반대 |
| (조건)?a:b | 조건이 참이면 a, 거짓이면 b |
| a&b | a와 b의 이진수에서 모두 1인 부분 |
| a|b | a와 b의 이진수에서 하나라도 1인 부분 |
| a^b | a와 b의 이진수에서 하나만 1인 부분 |
| ~a | a의 이진수에서 1인 부분은 0으로, 0인 부분은 1로 바꾼 값. 맨 앞의 부호비트도 바뀌므로 마이너스 값이 된다. 즉 -1을 곱한 값에 -1한 값이 된다. |
| a>>n | a의 이진수에서 오른쪽에서 n개를 제거한다. a = a/2^n |
| a<<n | a의 이진수에서 오른쪽에 0을 n개 더한다. a=a*2^n |
| a>>>n | <<<는 없다. a>>n과 같다. |
성찰
html 작성 시 EMMET을 통해 코드 단축키를 사용할 수 있다. 이 때, 여러 단축어를 중첩해서 사용하게 될 때 개행을 하고 싶다면 설정을 수정해주면 된다.
// 경로는 다음과 같다.
// C:\Users\계정이름\AppData\Roaming\Code\User\settings.json
"emmet.syntaxProfiles": {
"html": {
"inline_break": 1
}
}CSS 관련해서 솔직히 말하자면, 저 많은 복잡한 선택자를 외우느니, 클래스와 아이디를 제대로 활용해야겠다는 생각밖에 들지 않았다. 교수님이 이르시길, 컴퓨터공학은 원래 귀차니스트를 위한 것이라 했다. 너무 귀찮아서 최대한 효율적으로 자동화하려는 거라고...
핵심 정리
1. 오디오 태그와 비디오 태그는 브라우저별로 호환 여부가 다르므로, 여러 [MIME] 타입의 source를 등록해야 한다.
2. 가상 클래스의 링크와 반응 선택자는 [link] - [visited] - [hover] - [active] 순으로 사용해야 한다.
3. 다음 선택자 중 ::로 시작하지 않는 것을 고르시오.
① selection
② first-line
③ first-child
④ after
⑤ before
4. 다음 코드에서 틀린 부분을 찾고, 그 이유에 대해 설명하시오.
p:visited {color:rgb(237, 220, 256)}5. 다음 속성 선택자를 사용했을 때 선택되는 것을 모두 고르시오.
src|="luigi"① " luigi"
②" luigi-"
③ "luigi team"
④ "Luigi"
⑤ "luigi mario"
정보 감사합니다.