Oracle DB에 접속하기 위해 sqlplus에 로그인하려는데 user-name, password를 맞게 입력해도 ERROR : ORA-12560 : TNS:protocol adapter error 가 발생했다. user-name, password 를 잊어버린 게 아닌가 싶은 생각에 관리자로 접속해서 user-name, password 를 바꾸는 명령어도 입력해보았지만 계속 에러가 발생했다.

 

구글링을 하다보니,,,, 전혀 다른 문제 때문에 error가 발생했던 거다,,,,,

오라클 관련 프로그램들을 실행시키지 않고, sqlplus 를 실행하려 해서 발생한 에러였다,,,

인생,,,, 저번에 컴퓨터 부팅 시 오라클 관련 프로그램들이 자동으로 실행되게 설정해놓으면 부팅이 오래 걸린다는 얘기를 듣고 수동으로 바꿔놓았던 과거의 나가 떠올랐다,,,^^

 

아래의 3개 프로그램이 실행 상태여야 sqlplus 를 이용할 수 있다!

● OracleServiceXE

● OracleXEClrAgent

● OracleXETNSListener

 

그럼 어떻게 저 프로그램들을 실행시키는가!

 

1) 내PC -> 컴퓨터 관리를 누른다.

2) 컴퓨터관리 -> 서비스 및 응용 프로그램 -> 서비스를 누른다.

위의 사진과 같이 나오면 빨간색으로 표시한 3개의 프로그램을 실행시켜줘야 한다!!

그럼 아래와 같이 sqlplus가 잘 작동하는 것을 확인할 수 있다...!!

 

안녕하세요, 여행벌입니다.

오늘은 목록에 적용할 수 있는 여러 스타일에 대해서 포스팅해보겠습니다.


list-style-type 속성 : 목록의 불릿과 번호 스타일 지정하기

 list-style-type 속성을 이용하면 순서 없는 목록 ul 의 경우, 목록 앞에 다양한 불릿을 넣을 수 있고, 순서 있는 목록 ol 의 경우 번호 스타일을 지정할 수 있습니다.

list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>

list-style-image 속성 : 불릿 대신 이미지 넣기

 순서 없는 목록 앞에 붙는 불릿 대신 이미지를 넣으려면 list-style-image 속성을 이용하면 됩니다.

list-style-image : url("이미지경로")

list-style-position 속성 : 목록에 들여 쓰는 효과 내기

list-style-position 속성을 이용하면 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하기 때문에 결과 화면에는 불릿이나 번호가 좀 더 안쪽으로 들여 써진 듯한 효과를 줄 수 있습니다.

list-style-position : inside | outside

예시 1) 순서 없는 목록 불릿 바꾸기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin-left : 300px;
            background-color : pink;
            font-size : 3em;
            font : white;
        }
        .disc{
            list-style-type: disc;
        }
        .circle{
            list-style-type: circle;
        }
        .square{
            list-style-type: square;
        }
        .none{
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul class="disc">
        <li>disc속성적용</li>
        <li>disc속성적용</li>
    </ul>
    <ul class="circle">
        <li>circle속성적용</li>
        <li>circle속성적용</li>
    </ul>
    <ul class="square">
        <li>square속성적용</li>
        <li>square속성적용</li>
    </ul>
    <ul class="none">
        <li>none속성적용</li>
        <li>none속성적용</li>
    </ul>
</body>

</html>

4가지 속성을 모두 적용해보았습니다.

예시 2) list-style-position 속성 적용

이번에는 list-style-position 속성을 이용해 안쪽으로 들여 쓰기와 기본 값인 밖으로 들여 쓰기를 적용해보겠습니다.

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : pink;
            font-size : 3em;
            font : white;
        }
        .inside{
            list-style-position : inside;
        }
        .outside{
            list-style-position : outside;
        }
    </style>
</head>

<body>
    <ul class="inside">
        <li>inside 속성 적용</li>
        <li>inside 속성 적용</li>
    </ul>
    <ul class="outside">
        <li>outside 속성 적용</li>
        <li>outside 속성 적용</li>
    </ul>
</body>

</html>


목록과 관련된 속성은 많지 않지만, 자주 사용되니 익혀두시면 좋을 것 같습니다.

안녕하세요, 여행벌입니다.

오늘은 텍스트 정렬, 들여 쓰기, 줄 간격 등 문단 스타일에 대해서 포스팅해보겠습니다.


text-align 속성 : 텍스트 정렬하기

 text-align 속성은 문단의 텍스트 정렬 방법을 지정합니다. 우리가 흔히 한글에서 많이 쓰는 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 등을 text-align 속성을 이용해서 지정할 수 있습니다.

text-align : start | end | left | right | center | justify | match-parent

direction 속성 : 글자 쓰기 방향 지정하기

 direction 속성은 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지 정합니다. 한글과 영어를 비롯해 대부분의 언어는 왼쪽에서 오른쪽으로 쓰기 때문에 default 는 left-to-right 속성입니다.

direction : ltr | rtl

text-justify 속성 : 정렬 시 공백 조절하기

 text-align 속성이 justify 일 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격이 벌어질 수 있습니다. 이때 간격을 조절하는 속성이 text-justify 속성입니다.

text-justify : auto | none | inter-word | distribute

text-indent 속성 : 텍스트 들여 쓰기

 text-indent 속성은 문단의 첫 글자를 얼마나 들여 쓸지를 지정합니다.

text-indent : <크기> | <백분율>

line-height 속성 : 줄 간격 조절하기

문단의 첫 줄을 넘어 두 줄 이상이 되면 '줄 간격' 이 생깁니다. line-height 속성을 이용하면 줄 간격을 조절할 수 있습니다.

line-height : normal | <숫자> | <크기> | <백분율> | inherit

 숫자는 배수를 의미하며, 글자 크기가 12px 일 때, 숫자로 2를 주면 줄 간격은 24px가 됩니다. 

 normal은 브라우저가 기본적으로 제공하는 줄 간격으로 보통 글자 크기의 1.2배 입니다.

 inherit은 부모 속성을 그대로 가져온다는 뜻입니다.

text-overflow 속성 : 넘치는 텍스트 표기하기

 white-space : nowrap 으로 지정해 줄 바꿈을 하지 않을 때, 텍스트가 기준선을 벗어나 넘칠 수도 있습니다. 이렇게 넘치는 텍스트를 어떻게 처리할지 text-overflow 속성을 이용해 정할 수 있습니다.

text-overflow : clip | ellipsis

예시 1) direction 속성

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-size : 3em;
        }
        .ltr{
            direction : ltr;
        }
        .rtl{
            direction : rtl;
        }
    </style>
</head>
<body>
    <p class="ltr">left-to-right 속성으로 글씨쓰기.</p>
    <p class="rtl">right-to-left 속성으로 글씨쓰기.</p>
</body>
</html>

left-to-right 속성과 right-to-left 속성으로 비슷한 문구를 써보겠습니다.

문구 자체가 바뀌지는 않았지만, 글이 써지는 순서가 바뀐 것을 확인할 수 있습니다.

예시 2) text-align 속성

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : pink;
            color : white;
            font-size : 3em;
        }
        .left{
            text-align : left;
        }
        .right{
            text-align : right;
        }
        .center{
            text-align : center;
        }
        .justify{
            text-align : justify;
        }
    </style>
</head>
<body>
    <p class="left">left 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
    <p class="right">right 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
    <p class="center">center 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
    <p class="justify">justify 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
</body>
</html>

자주 쓰이는 text-align 속성 4가지를 예시를 통해 익혀보겠습니다.

예시 3) line-height 속성

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: pink;
            color: white;
            font-size: 3em;
        }
        .ex1{
            line-height : 3;
        }
        .ex2{
            line-height : 35px;
        }
        .ex3{
            line-height : 100%;
        }
    </style>
</head>

<body>
    <p class="ex1">
        line-height : 3(3배)<br>
        서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
    <p class="ex2">
        line-height : 35px<br>
        서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
    <p class="ex3">
        line-height : 100%(1배)<br>
        서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
</body>

</html>

line-height 속성을 3(부모의 3배), 35px, 100%(부모 기준으로 100%) 3가지 방법으로 부여해보겠습니다. 이때, 부모는 해당 글씨의 크기가 됩니다.


이상으로 문단 스타일을 지정하는 여러가지 속성 정리를 마무리하겠습니다.

안녕하세요, 여행벌입니다.

오늘은 CSS 속성 중 텍스트 관련된 속성들에 대해서 배워보겠습니다.


color 속성 : 글자 색 지정하기

color : <색상>;

 color 속성을 이용하면 글자에 색을 지정해줄 수 있습니다. 색상 값은 16진수나 rgb, rgba,  hsl 또는 색상 이름으로 표기할 수 있습니다.

color : #ff0000; // 16진수 표현법
color : rgb(0, 200, 0); // rgb 표현법
color : rgba(0, 200, 0, 0.5); // rgba 표현법
color : blue; // 색상이름 표현법

rgba 의 마지막 값은 rgb와 다르게 투명도를 줄 수 있습니다.

text-decoration 속성 : 텍스트에 줄 표시하기 / 없애기

text-decoration : none | underline | overline | line-through

text-tranform 속성 : 텍스트 대, 소문자 변환하기

text-tranform : none | capitalize | uppercase | lowercase | full-width

full-width 속성값의 전각 문자란 고정 폭 영문자 너비의 두 배 정보 너비의 문자입니다.

text-shadow 속성 : 텍스트에 그림자 효과 추가하기

text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>

그림자 값을 여러개 사용하면 그래픽으로 처리한 듯한 텍스트를 만들 수도 있습니다. 아래에서 예시로 다뤄보겠습니다.

white-space 속성 : 공백 처리하기

white-space : normal | nowrap | pre | pre-line | pre-wrap

letter-spaceing / word-spacing 속성 : 텍스트 간격 조절하기

letter-spacing : normal | <크기>

word-spacing : normal | <크기>

letter-spacing 속성은 낱 글자 사이 간격을 조절하고, word-spacing 속성은 단어와 단어 사이 간격을 조절합니다. 주로 letter-spacing 속성을 이용해서 자간을 조절합니다.

예시1) color 속성 사용

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : black;
        }
        p{
            font-size : 50px;
        }
    </style>
</head>
<body>
    <p style="color : #ff0011">Likelion(16진수)</p>
    <p style="color : red">Likelion(색상이름)</p>
    <p style="color : rgb(255, 0, 0)">Likelion(rgb)</p>
    <p style="color : rgba(255, 0, 0, 0.5)">Likelion(rgba)</p>
</body>
</html>

같은 색을 여러 방법으로 적용해보았습니다.

예시2) text-shadow 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>text-transform</title>
  <style>
    body { background:#222;}  /* 문서 배경색 */
    h1 { 
      font-size:80px;  /* 글자 크기 */
      font-family:"Arial Rounded MT";  /* 글꼴 */
      letter-spacing:4px; /* 자간 */
    }
    .shadow {
      color: #000; /* 글자색 */
      text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;  /* 텍스트 그림자 */
    }
  </style>
</head>
<body>
  <h1 class="shadow">LIKELION</h1>
</body> 
</html>


이상으로 텍스트 관련 CSS 속성 정리를 마치겠습니다.

+ Recent posts