코딩
-block 속성 태그
-block 속성 특징 : 상자의 성격을 가지며, 넓이와 높이를 가진다. 이 때, 따로 넓이나 높이를 지정하지 않으면 브라우저의 전체 넓이를 차지하며, 여러 개 출력시엔 세로로 출력된다
-제목태그 h1~h6
제목태그는 제목을 나타내고 구분지을때 사용하는 태그로, 제목의 우선순위(중요도)에 따라 태그를 구분하여 사용한다. h1태그가 가장 크고, 숫자가 커질수록 글자크기는 작아진다.
보통 h1-4를 많이쓰고, h5-6은 크기가 작아 잘 사용되지 않는다.
h1은 웹 사이트에서 각 페이지의 header안에 있는 제목(로고)를 나타내는 용도로 사용하기때문에 html문서 1개 당 1번씩만 사용한다.
-본문태그(단락태그) p
본문을 나타내기 위해 단락으로 구분하는 태그로 p와 /p 태그 사이에 내용을 넣는다. 보통 한 줄 이상의 긴 글을 표현할 때 사용한다.
-br태그(줄바꿈태그)
문장안에서 줄바꿈이 필요할 경우 단독으로 사용하는 단독태그이다. br태그는 단순 줄바꿈태그라 넓이와 높이를 지정할수는 없지만, 다음줄로 문자를 내려주는 역할을 하기 때문에(세로출력) block속성에 속한다.
-기타 태그들
수평선태그(hr) 는 브라우저 가로 전체를 차지하는 선을 그려주는 태그인데, 입체효과가 적용되어있어 잘 사용하진 않고 css효과로 대체한다.
인용문태그(blockquote) 는 긴 인용문을 나타낼 때 사용하는 태그로 출력하면 자동으로 들여쓰기가 적용되는 태그이다. 하지만 이 태그도 css작업 시 들여쓰기를 취소하고 사용하면 p태그와 다를게없어서 잘 사용되지는 않는다.
pre태그 는 이 태그 사이에서 쓰는 공백이나 줄바꿈을 그대로 적용해주는 태그이다. 하지만 글자 폰트가 굴림체가 적용되고, 들여쓰기가 적용되어 css작업 시 초기화단계가 필요해 잘 사용하지 않는다.
-inline 속성 태그
-inline속성 특징 : 줄의 성격을 가지고 있기때문에, 넓이와 높이를 적용할 수 없다. 태그를 여러 개 출력하면 가로로 출력되며, 태그 사이에 공백 1칸을 포함한다.
상자안에 줄을 넣을수는 있지만 줄안에 상자를 넣을수는 없듯, block 태그 안에 inline 태그를 넣을수는 있지만 반대의 경우는 오류가 발생한다.
(단, 태그에 따라 예외는 있다.)
-★b, strong 태그★
글자의 모양을 굵게하는 태그이다. b태그는 글자를 단순히 꾸미는 용도로 사용되고, strong은 사용자가 꼭 알아야하는 내용을 강조하거나 시각장애인에게 화면 낭독기를 통해 중요한 내용을 전달하는 태그이다.
-em, i 태그
글자의 모양을 이탤릭체로 기울여 표현하는 태그이다. em태그는 다른내용보다 강조할 때 사용하고, i태그는 주위와 구분해야하는 내용을 강조할 때 사용하지만 실제로 마크업할때는 크게 용도를 구분해 사용하진 않는다.
-q인용문태그
짧은 인용문을 표시할 때 사용하는 태그로 시작과 끝에 ""가 출력된다.
-mark 태그형광펜태그
형광펜으로 칠한것처럼 해당 부분에 노란색 배경에 칠해져 나오는 태그이다. 예전에는 검색어 등의 내용 중 일부를 강조하는 태그로 사용되었지만, 가독성 문제도 있고, 자폐장애를 앓고있는 사람들에게 발작위험이 있을 수 있어 지금은 거의 사용되지 않는다.
★span 태그★ 글자영역 묶기
css를 사용하기 전에는 크게 달라지는게 없는것처럼 보이지만, span으로 먼저 영역을 지정한 뒤, css를 부분적으로 적용하는데 사용된다. 작은 배경요소를 코드로 처리하거나, 클릭하면 모양이 바뀌는 아이콘 등도 모두 span태그를 사용한다.
피그마
- Auto Layout
오토레이아웃이란 자동레이아웃정렬기능이다. 여러 도형들을 묶어 오토레이아웃을 적용시키면 자동으로 프레임을 씌우며 간격과 높낮이 등을 정렬시킨다. 컨텐츠끼리의 순서는 방향키로 변경이 가능하며, 프레임안에서의 정렬 또한 변경할 수 있다.
Dimensions 는 프레임의 크기를 의미한다.
숫자 옆 화살표를 눌러보면 fixed / fill / hug 3가지 옵션으로 나뉜다.
fixed는 특정길이로 고정된 옵션이며, fill은 부모(프레임)가 기준이 되는 옵션으로 부모의 틀에 맞춰 자식들이 사이즈를 조절한다.
즉 프레임의 너비를 줄이면 컨텐츠들의 크기가 줄어들게 된다.
hug는 자식이 기준이 되는 옵션으로 자식의 크기에 맞춰 부모의 크기가 변경된다.
즉 컨텐츠의 크기를 늘리면 프레임 밖으로 벗어나게 되는게 아니라, 프레임 자체가 늘어나게 된다.
Direction은 프레임 속 컨텐츠들의 나열방향이다.
컨텐츠를 선택하고 ctrl+d를 누르면 화살표 방향대로 복제되며, wrap이라고 되어있는 마지막 화살표를 선택해주면 가로 방향대로 복제되다가 줄을 바꿔서 복제된다.
alignment는 프레임안에서 컨텐츠의 위치를 정렬하는 기능이다.
gap과 padding은 여백으로 gap은 컨텐츠와 컨텐츠 사이의 여백을 의미하고, padding은 컨텐츠와 프레임사이의 여백을 의미한다.
오토레이아웃은 중첩사용도 가능해 다른 디자인툴에는 없는 편리한 기능이지만, 한 번 레이아웃을 적용한 이후 컨텐츠를 넣었다 뺐다 하다보면 레이아웃이 완전히 틀어질 수 있기때문에 꼭 가장 작은 단위부터 오토레이아웃을 적용해준다.
