템플릿 문자열 JavaScript의 문자열 : var string1 ='안녕하세요' var string2 ='환영합니다' var welcome = string1 + ' ' + string2; // ⓐ var product = { name: '책', price: '5000원' }; var message = '제품' + product.name + '의 가격은' + product.price + '입니다'; // ⓑ var multiLine = '문자열1\n문자열2'; // ⓒ var value1 = 1; var value2 = 2; var boolValue = false; var operator1 = '곱셈값은 ' + (value1 * value2) + '입니다.'; // ⓓ var operator2 = '불..

배치 방법 결정하는 속성 display 속성 display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수 있음 자주 사용하는 display 속성값 block : 인라인 레벨 요소를 블록 레벨 요소로 만듦 inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦 inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있음 none : 해당 요소를 화면에 표시하지 않음 -(예시) : 예시 1 예시 2 예시 3 예시 4 -(결과) : 왼쪽이나 오른쪽으로 배치하는 속성 float 속성 태그는 블록 레벨 요소..

요소 주변의 여백을 설정하는 속성 margin 속성 요소와 요소 사이의 간격을 조절 할 수 있음 4개 방향에 똑같이 지정할 수 있고, margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있음 기본형 : margin: | | auto margin 속성값 : 너비값이나 높이값을 px이나 em 같은 단위와 함께 수치로 지정함 : 박스 모델을 포함한 부모 요소를 기준으로 너비값이나 높이값을 퍼센트(%)로 지정함 auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함 마진 속성을 사용하여 웹 문서를 가운데 정렬하기 margin 속성을 사용하여 웹 문서의 내용을 화면 중앙에 배치하려면 배치할 요소의 너비값이 정해져 있어야 함 margin-l..

박스 모델의 방향top : 윗 부분right : 오른쪽bottom : 아랫 부분left : 왼쪽테두리 스타일을 지정하는 속성border-style 속성기본값은 noneborder-style 속성값none테두리가 없음 / 기본값hidden테두리를 감춤 / 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않음solid테두리를 실선으로 표시함dotted테두리를 점선으로 표시함dashed테두리를 짧은 직선으로 표시함double테두리를 이중선으로 표시함 / 두 선 사이의 간격이 border-width 값이 됨groove테두리를 창에 조각한 것처럼 표시함 / 홈이 파인 듯 입체 느낌inset표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀..

박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라짐블록 레벨 요소블록 레벨 요소태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것한 줄을 차지한다 = 해당 요소의 너비가 100%∴ 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음대표적인 태그로 , , 등이 있음-(예시) : 예제 예시 1 예시 2 예시 3 예시 4예시 5 -(결과) :인라인 레벨 요소인라인 레벨 요소한 줄을 차지하지 않음콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음∴ 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있음대표적인 태그로 , , 등이 있음-(예시) : 예제 예시 1 예시 2 예시 3 예시 4 예시 5 -(결과) :박스 모델박스 모델스타일 시트..

표 제목의 위치를 정해 주는 속성 caption-side 속성 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 사용하면 표 아래쪽으로 옮길 수 있음 기본형 : caption-side: top | bottom ┌ top : 캡션을 표 윗부분에 표시함 / 기본값 └ bottom : 캡션을 표 아랫부분에 표시함 표에 테두리를 그려 주는 속성 border 속성 표 바깥 테두리와 셀 테두리를 각각 지정함 -(예시) : 예제 예제 예시 1 예시 2 예시 3 예시 4 A B C D 가 나 다 라 -(결과) : 셀 사이의 여백을 지정하는 속성 border-spacing 속성 셀과 셀 사이의 여백을 조절할 수 있음 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1..