본문 바로가기

전체 글743

[HTML5 & CSS3] 문단 스타일 ▶ 문단 스타일 * direction 속성 - 글자 쓰기 방향 지정하기 기본형) direction : ltr(왼쪽에서 오른쪽으로) / rtl(오른쪽에서 왼쪽으로) * text-align 속성 - 텍스트 정렬하기 기본형) text-align : start(현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다) / end(현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다) / left(왼쪽에 맞추어 문단을 정렬) / right(오른쪽에 맞추어 문단을 정렬) / center(가운데에 맞추어 문단을 정렬) / justify(양쪽에 맞추어 문단을 정렬) / match-parent(부모 요소를 따라 문단을 정렬) * text-justify 속성 - 정렬 시 공백 조절하기 기본형) text-justify :.. 2021. 2. 3.

[HTML5 & CSS3] CSS 기초 - 텍스트 스타일 ▶ 텍스트 스타일 * color 속성 - 글자 색 지정하기 웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때 사용. 기본형 → color: * text-decoration 속성 - 텍스트에 줄 표시하기 / 없애기 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있다. 또한 웹 문서의 기존 내용을 취소하고 새로운 내용을 입력할 때 취소 선을 이용하면 기존 내용을 완전히 삭제하지 않고 새로운 내용과 비교하며 확인할 수 있다. * text-transform 속성 - 텍스트 대·소문자 변환하기 * text-shadow 속성 - 텍스트에 그림자 효과 추가하기 * white-space 속성 - 공백 처리하기 * letter-spacing과 word-spacing 속성 - 텍스트.. 2021. 2. 3.

[HTML5 & CSS3] CSS 기초 ▶ CSS css를 이용하면 html로 작성된 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있다. (태블릿, 휴대폰 등) 모든 스타일 정보는 사이에 정의 할 것. * 내부 스타일 시트 * 외부 스타일 시트 * 인라인 스타일 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것. * 전체 선택자 - 모든 요소에 스타일 적용하기 전체 선택자는 말 그대로 스타일을 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. 전체 선택자로는 *를 사용한다. 또한 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. * { margin: 0; padding: 0; } * 태그 선.. 2021. 2. 3.

[HTML5 & CSS3] 숙제 (페스티벌 페이지 만들기) ▶과정 -윗부분은 4칸, 밑부분은 3칸이라서 줄 맞추기가 힘들었다 일단 사진부터 넣고 보기로함. -줄도 안맞고 사진도 크기가 들쭉날쭉. 총체적 난국. 해결방법이 도저히 생각이 안나서 한숨 자기로함 -테이블 속 테이블을 만들면 어떨까싶어서 만들어봤더니 줄이 겹친다. -한숨 자고 일어나서 생각해보니 12열로 해서 윗부분은 3개씩, 밑부분은 4개씩 병합하면 어떨까 라는 생각이 번뜩 들었다. 결과는 성공! 하지만 아직 사진크기를 해결하지 못했다. 아이콘도 넣어야하고... -사진을 배경으로 넣으니까 해결됨. 근데 가운데 줄 간격이 맞지않다. '전남 순천시' 의 사진도 짤려서 나오고... 사진을 좀 더 크게 수정했다. ▶ 완성본 -산정호수 명성산 억새꽃 축제~영광 불갑산상사화축제 칸 라인 간격이 이상해져서 고치느라.. 2021. 2. 3.

[HTML5 & CSS3] 폼 관련 태그들 - 여러 데이터 나열해 보여주기 ▶ 여러 데이터 나열해 보여주기 * , 태그 - 드롭다운 목록 만들기 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 사용. * 태그 - 옵션끼리 묶기 드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우에 사용. * 태그, 태그 * 태그 - 여러 줄 입력하는 텍스트 영역 만들기 ▶ 기타 다양한 폼 요소들 * 태그 - 버튼 넣기 태그는 태그 이름에서 그 역할을 알 수 있다. 태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수도 있고 CSS를 이용해 원하는 형태로 꾸밀 수도 있다. 전송하기 * 태그 - 계산 결과 입력하는 값이 계산 결과라는 것을 브라우저에게 알려 준다. + = * 태그 - 진행 상태 보여주기 작업 진행 상태를 나타낼 .. 2021. 2. 2.

[JavaScript] 반복문 반복문 ▶ while문 while문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있다. 예제 1) '안녕하세요1~ 안녕하세요10'까지 1씩 증가시키면서 10회 출력하기 예제 2) 1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력하기 예제 3) 20부터 10까지의 숫자 중 짝수일 경우에는 파란색, 홀수일 경우에는 빨간색으로 출력되도록 하기 ▶ do-while문 while문의 경우에는 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정한다. 하지만 do-while문은 반드시 한 번은 코드를 실행하고 조건식을 검사한다. ▶ for문 for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행한다. 사용 방법은 while문과 같지만 while문보다 사용.. 2021. 2. 2.

이전 1 ··· 101 102 103 104 105 106 107 ··· 124 다음

티스토리툴바